Vue.3.x 新可选文件：vue.config.js 内容；

• 预留；

 

 

• publicPath

• Type：string ;
• Default :  ' / '  ;
• The base URL your application bundle will be deployed at (known as baseUrl before Vue CLI 3.3).

• The base URL your application bundle will be deployed at (known as baseUrl before Vue CLI 3.3).  This is the equivalent of webpack's output.publicPath,  but Vue CLI also needs this value for other purposes, so you should always use publicPath instead of modifying webpack output.publicPath. ;

 

• By default, Vue CLI assumes your app will be deployed at the root of a domain, e.g.    https://www.my-app.com/.    If your app is deployed at a sub-path, you will need to specify that sub-path using this option.                   For example, if your app is deployed at    https://www.foobar.com/my-app/,   set   publicPath     to     '/my-app/' ；
  

 

• The value can also be set to an empty string ( ' ' ) or a relative path ( ./ )  so that all assets are linked using relative paths. This allows the built bundle to be deployed under any public path, or used in a file system based environment like a Cordova hybrid app

• Limitations of relative publicPath ;
  
  Relative publicPath has some limitations and should be avoided when:
  
  * You are using HTML5 history.pushState routing;
  
  * You are using the pages option to build a multi-paged app;

   

• This value is also respected during development. If you want your dev server to be served at root instead, you can use a conditional value;

• module.exports = {
    publicPath: process.env.NODE_ENV === 'production ? '/production-sub-path/' : '/' ;
  }

   

 

• outputDir

• Type : string ;
• Default :  'dist' ;
• The directory where the production build files will be generated in when running  vue-cli-service build.  Note the target directory will be removed before building (this behavior can be disabled by passing                        --no-clean  when building); 
• TIP:

• Always use outputDir instead of modifying webpack output.path.
  

  　　

• assetsDir

• Type : string ;
• Default: '' ;  // 默认的清空 ；
• 

   

   

• A directory (relative to outputDir) to nest generated static assets (  js, css, img,  fonts ) under.

• // 用于放置生成的静态资源 (js、css、img、fonts) 的；（项目打包之后，静态资源会放在这个文件夹下）
    assetsDir: 'static',

• 

   

• indexPath

• Type: string
• Default: 'index.html' ；
• 

   

   

• Specify the output path for the generated index.html (relative to outputDir). Can also be an absolute path ；
• Example: 

•  indexPath: ' 1 / lsy.html'

• 
• 

   

 

 

• # filenameHashing

 

• Type: boolean
• Default: true
• By default,   generated static assets contains hashes in their filenames for better caching control.    However,   this requires the index HTML to be auto-generated by Vue CLI.    If you cannot make use of the index HTML generated by Vue CLI, you can disable filename hashing by setting this option to false.
•  .

 

• # pages

• Type: Object
• Default: undefined
• .
• Build the app in multi-page mode. Each "page" should have a corresponding JavaScript entry file. The value should be an object where the key is the name of the entry, and the value is either: 

1. An object that specifies its entry, template, filename, title and chunks (all optional except entry). Any other properties added beside those will also be passed directly to html-webpack-plugin, allowing user to customize said plugin
2. Or a string specifying its entry ;

module.exports = {
  pages: {
    index: {
      // entry for the page
      entry: 'src/index/main.js',
      // the source template
      template: 'public/index.html',
      // output as dist/index.html
      filename: 'index.html',
      // when using title option,
      // template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // chunks to include on this page, by default includes
      // extracted common chunks and vendor chunks.
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // when using the entry-only string format,
    // template is inferred to be `public/subpage.html`
    // and falls back to `public/index.html` if not found.
    // Output filename is inferred to be `subpage.html`.
    subpage: 'src/subpage/main.js'
  }
}

• TIP
• When building in multi-page mode, the webpack config will contain different plugins (there will be multiple instances of  html-webpack-plugin  and  preload-webpack-plugin ). Make sure to run vue inspect if you are trying to modify the options for those plugins
• .

 

• #lintOnSave

• Type: boolean | 'warning' | 'default' | 'error'
• Default: 'default'

• Whether to perform lint-on-save during development using eslint-loader. This value is respected only when @vue/cli-plugin-eslint is installed.

  When set to true or 'warning', eslint-loader will emit lint errors as warnings. By default, warnings are only logged to the terminal and does not fail the compilation, so this is a good default for development.

  To make lint errors show up in the browser overlay, you can use lintOnSave: 'default'. This will force eslint-loader to actually emit errors. this also means lint errors will now cause the compilation to fail.

  Setting it to 'error' will force eslint-loader to emit warnings as errors as well, which means warnings will also show up in the overlay.

  Alternatively, you can configure the overlay to display both warnings and errors:

• // vue.config.js
  module.exports = {
    devServer: {
      overlay: {
        warnings: true,
        errors: true
      }
    }
  }

   

• When lintOnSave is a truthy value, eslint-loader will be applied in both development and production. If you want to disable eslint-loader during production build, you can use the following config:

• // vue.config.js
  module.exports = {
    lintOnSave: process.env.NODE_ENV !== 'production'
  }

   

• .

• #runtimeCompiler

• Type: boolean
• Default: false
• Whether to use the build of Vue core that includes the runtime compiler. Setting it to true will allow you to use the template option in Vue components, but will incur around an extra 10kb payload for your app.
• See also: Runtime + Compiler vs. Runtime only.

 

• #transpileDependencies

• Type: Array<string | RegExp>
• Default: []
• By default babel-loader ignores all files inside node_modules. If you want to explicitly transpile a dependency with Babel, you can list it in this option.

• Jest config :

  This option is not respected by the cli-unit-jest plugin, because in jest, we don't have to transpile code from /node_modules unless it uses non-standard features - Node >8.11 supports the latest ECMAScript features already.

  However, jest sometimes has to transform content from node_modules if that code uses ES6 import/export syntax. In that case, use the transformIgnorePatterns option in jest.config.js.

  See the plugin's README for more information

• Example: 
• 使用vue时，node_modules里面的文件不会经过babel再编译一遍，所有有些库里使用了const之类的es6属性，而且这些库在打包的是也没有考虑兼容ie，比如常用的swiper。所以最后导致项目在ie中会报错 ;

• module.exports = {
    transpileDependencies: ['swiper'],   //  注意：安装依赖的时候使用npm ，不能使用cnpm ,否则存在无效可能 ；删除原有依赖，重新npm安装；
  
  }

• 。

 

• #productionSourceMap

• Type: boolean

• Default: true
• Setting this to false can speed up production builds if you don't need source maps for production ；
• Eaxmple:

• vue项目打包，打包之后js中，会自动生成一些map文件 [ productionSourceMap = true ,生成map文件]
  
  map文件的作用: 
  项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错