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就可以像未加密的代碼一樣，准確的輸出是哪一行哪一列有錯