vue-cli3.0之vue.config.js的配置項(注解)

一、先看全貌

module.exports = {
  /* 部署應用包的基本URL */
  /* baseUrl 從 Vue CLI 3.3 起已棄用 ，請使用publicPath */
  //  baseUrl: process.env.NODE_ENV === "production" ? "./" : "./",
  publicPath: process.env.NODE_ENV === 'production' ? './' : './',
  /* 生產環境構建文件的目錄 defalut: dist */
  outputDir: 'dist',
  /* 放置生成的靜態文件目錄（js css img） */

  assetsDir: 'static',

  /* 指定生成的index.html 輸出路徑 相對 default: index.html */

  indexPath: 'index.html',

  /* 指定生成文件名中包含hash default: true */

  filenameHashing: true,

  /* 是否保存時 lint 代碼 */

  lintOnSave: process.env.NODE_ENV === 'production',

  /* 是否使用編譯器 default: false */

  runtimeCompiler: false,

  /* 默認babel-loader會忽略node_modules中的文件，你想顯示的話在這個選項中列出來 */

  // transpileDependencies: [],

  /* 生產環境的source map */

  productionSourceMap: true,

  // crossorigin: "",
  integrity: false,

  configureWebpack: {
    resolve: {
      alias: {
        assets: '@/assets',
        components: '@/components',
        views: '@/views'
      }
    }
  },

  // css相關配置

  css: {
    // 是否使用css分離插件 ExtractTextPlugin

    extract: true,

    // 開啟 CSS source maps?

    sourceMap: false,

    // css預設器配置項

    loaderOptions: {},

    // 啟用 CSS modules for all css / pre-processor files.

    modules: false
  },

  devServer: {
    port: 8080,

    host: '0.0.0.0',

    https: false,

    // 自動啟動瀏覽器

    open: false,

    proxy: {
      '/api': {
        //代理路徑 例如 https://baidu.com
        target: 'https://baidu.com',
        // 將主機標頭的原點更改為目標URL
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

二、細解配置

1、publicPath

部署應用包的基本URL，默認  ./

 

意思是生產環境，部署路徑在test子目錄下。

2、outputDir

生產環境構建文件的目錄 defalut: dist。

build 命令執行完以后，輸出的路徑。

 

3、 assetsDir

放置生成的靜態文件目錄（js css img）。

注意：src中assets內容也會根據類型打包至相關的文件夾下。

 

4、indexPath

指定生成的index.html 輸出路徑 相對 default: index.html 

 

5、filenameHashing

指定生成文件名中包含hash default: true

當你不修改內容時，文件的hash值是不會變化的。

 

 6、lintOnSave  

當保存時觸發eslint檢查，可以指定環境觸發檢查。

 

 

 7、runtimeCompiler

待學習

8、productionSourceMap

是否生成map文件，應該根據環境變量設置。

 

9、integrity

 

二、configureWebpack

重要

三、devServer

 

 

 

 

 

 

 

 

 

------------恢復內容結束------------