Detailed explanation of configuration tutorial in vue-cli3

Preface

vue-cli3 advocates zero configuration, and its graphical project management is also very high-end.

However, if vue-cli3 advocates zero configuration, it is different from the previous configuration method of vue-cli2.

Alias ​​settings, sourcemap control, input file location and output file location and output method, compression js control, packaging webapck log analysis, externals ignorance configuration (external introduction), debugging port configuration, proxy interface configuration, etc.

Sometimes we need to configure it, because the official recommendation is not suitable for our usual development.

So, my configuration is as follows. There is also a hash configuration that hash is not known yet. It will be solved in the future. Update here when it is solved.

Data query reference address:

/staven630/vue-cli3-config(Introduce the configuration method)

/loveRandy/vue-cli3.0-vueadmin(Taking from the configuration in the senior vue-cli3 project) I also checked many related projects on github.

text

After creating a project using vue-cli3, webpack configurations are hidden, when you need to overwrite the original configuration, you need to create a new file in the root directory of the project to configure the new configuration.

Configure related fields

Will be automatically loaded

 = {
  /* Deploy the URL in the production environment and development environment: You can distinguish the current environment. BaseUrl has been deprecated since Vue CLI 3.3. You need to use publicPath */ 
  /* baseUrl: .NODE_ENV === 'production' ? './' : '/' */
  publicPath: .NODE_ENV === 'production' ? '/public/' : './',
  /* Output file directory: When npm run build, the directory name of the generated file */
  outputDir: 'dist',
  /* Place the generated static resources (js, css, img, fonts) directory (relative to outputDir) */
  assetsDir: "assets",
  /* Whether to generate sourceMap file when building production packages, false will increase the build speed */
  productionSourceMap: false,
  /* By default, the generated static resources include hash in their file names for better control over the cache. You can turn off file name hash by setting this option to false.  (When false, it is to keep the original file name unchanged) */
  filenameHashing: false,
  /* eslint detection is performed when the code is saved */
  lintOnSave: true,
  /* webpack-dev-server related configuration */
  devServer: {
    /* Automatically open the browser */
    open: true,
    /* Set to 0.0.0.0, then all addresses can be accessed */
    host: '0.0.0.0',
    port: 8066,
    https: false,
    hotOnly: false,
    /* Use the proxy */
    proxy: {
      '/api': {
        /* Target proxy server address */
        target: 'http://47.100.47.3/',
        /* Cross-domain allowed */
        changeOrigin: true,
      },
    },
  },
}

Summarize

The above is a detailed explanation of the configuration tutorial in vue-cli3 introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!