vue+typescript build project related configuration

Step 1: integrate ivew

cnpm install iview --save
  • 1

Execute this command to install the iview component library

Open the main.ts file and add the following code:

//Introducing the iview component
import iView from 'iview';
import 'iview/dist/styles/iview.css';
Vue.use(iView);
  • 1
  • 2
  • 3
  • 4

Step 2: modify the router configuration information

//Route start jump
router.beforeEach(function (to, from, next) {
store.commit('updateLoadingStatus', {isLoading: true});
next();

})
//Route jump end
router.afterEach(function (to) {
//Close the reminder box after the interface jump is completed
store.commit('updateLoadingStatus', {isLoading: false});
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

Step 3: add service agent
There are many fewer config files in the project created by vue3 cli. You need to add a vue.config.js manually

My configuration is as follows:

// vue.config.js configuration description
//Official vue.config.js reference document https://cli.vuejs.org/zh/config/ ා CSS loaderoptions
// Only a part is listed here. For specific configuration, please refer to the document
module.exports = {
    // Deploy URL s in production and development environments.
    // By default, Vue CLI assumes that your application is deployed on the root path of a domain name
    //For example, https://www.my-app.com/. If the application is deployed on a subpath, you need to specify this subpath with this option. For example, if your app is deployed at https://www.my-app.com/my-app/, set baseUrl to / my-app /.
    baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
    // outputDir: when npm run build or yarn build, the directory name of the generated file (to be consistent with the production environment path of baseUrl)
    outputDir: "eplatMg",
    //Used to place the generated static resources (js, css, img, fonts); (after the project is packaged, the static resources will be placed in this folder)
    assetsDir: "assets",
    //Specify the output path of the generated index.html (after packaging, change the default file name of index.html)
    // indexPath: "myIndex.html",
    //By default, generated static resources include hashes in their filenames for better cache control. You can turn off the filename hash by setting this option to false. (false is to keep the original file name unchanged)
    filenameHashing: false,
    //   lintOnSave: {type:Boolean default:true} ask if you use eslint
    lintOnSave: true,
    //If you want to disable eslint loader during production build, you can use the following configuration
    // lintOnSave: process.env.NODE_ENV !== 'production',
    //Whether to use the Vue build that contains the runtime compiler. When set to true, you can use the template option in Vue components, but this will add about 10kb to your application. (default false)
    // runtimeCompiler: false,
    /**
     * If you don't need a source map for the production environment, you can set it to false to speed up the construction of the production environment.
     *  After packing, it is found that the map file is too large and the project file is too large. If false is set, the map file will not be output
     *  map The function of the file is: after the project is packed, the code is compressed and encrypted. If an error is reported during operation, the output error information cannot accurately know where the code is reporting an error.
     *  With map, you can output exactly which line and column is wrong, just like the unencrypted code.
     * */
    productionSourceMap: false,
    // It supports all options of webpack dev server
    devServer: {
        host: "localhost",
        port: 8888, // Port number
        https: false, // https:{type:Boolean}
        open: true, //Configure autostart browser
        // proxy: 'http://localhost:4000' / / configure cross domain processing, only one proxy
        // Configure multiple agents
        proxy: {
            "/api": {
                target: "<url>",
                ws: true,
                changeOrigin: true
            },
        }
    }
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

Check whether the configuration is successful. You can run cnpm run build. If the eplatMg folder is generated, the configuration is ok

      </div>
      <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-258a4616f7.css" rel="stylesheet">
              </div>

Tags: Vue npm Webpack

Posted on Fri, 08 Nov 2019 17:11:51 -0500 by jimmyhumbled