Vue-cli中 vue.config.js 的配置詳解

時間 2021-08-14

標籤 javascript css html vue java node webpack nginx git web 欄目 JavaScript 简体版

原文原文鏈接

1. Vue-cli2 升級到 Vue-cli3+

1.1 卸載舊版本javascript

Vue CLI 的包名稱由 vue-cli 改爲了 @vue/cli。若是你已經全局安裝了舊版本的 vue-cli (1.x 或 2.> x)，須要先卸載它。css

npm uninstall vue-cli -g
// 或
yarn global remove vue-cli

1.2 node 配置html

Vue CLI3+ 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)vue

1.3 全局安裝包java

npm install -g @vue/cli
// 或
yarn global add @vue/cli

1.4 建立一個項目node

vue create vue-web

2. Vue CLI中模式和環境變量詳解

3. Vue-cli3 / Vue-cli4 配置語法

3.1 目錄結構

├── README.md  					# 說明
|-- dist                       	# 打包後文件夾
├── babel.config.js 			# babel語法編譯
├── package-lock.json 
├── public						# 靜態文件夾,這類資源將會直接被拷貝，而不會通過 webpack 的處理。
│   ├── favicon.ico
│   └── index.html				#入口頁面
└── src						    # 源碼目錄
    ├── App.vue - 頁面
    ├── assets  - 靜態目錄,這類引用會被 webpack 處理。
    │   └── logo.png
    ├── components 組件
    │   └── HelloWorld.vue
    └── main.js                  # 入口文件，加載公共組件
│—— vue.config.js                # 配置文件，需自行配置 
│—— .gitignore          		 # git忽略上傳的文件格式   
│—— babel.config.js   			 # babel語法編譯                        
│—— package.json       	         # 項目基本信息 
│—— .env       	                 # 環境變量和模式，需自行配置 
│—— .eslintrc.js    		  	 # ES-lint校驗

3.2 vue.config.js 配置

Vue-cli3+ 和 Vue-cli2 的最大區別：在於內置了不少配置，沒有 build 文件夾和 config 的配置。可是在開發中，避免不了的仍是須要個性化的配置，這裏系統講一下 vue.config.js 的配置。webpack

3.2.1 基礎版

module.exports = {
  publicPath: './',  // 基本路徑
  outputDir: 'dist', // 構建時的輸出目錄
  assetsDir: 'static', // 放置靜態資源的目錄
  indexPath: 'index.html', // html 的輸出路徑
  filenameHashing: true, // 文件名哈希值
  lintOnSave: false, // 是否在保存的時候使用 `eslint-loader` 進行檢查。

  // 組件是如何被渲染到頁面中的？ （ast：抽象語法樹；vDom：虛擬DOM）
  // template ---> ast ---> render ---> vDom ---> 真實的Dom ---> 頁面
  // runtime-only：將template在打包的時候，就已經編譯爲render函數
  // runtime-compiler：在運行的時候纔去編譯template
  runtimeCompiler: false,

  transpileDependencies: [], // babel-loader 默認會跳過 node_modules 依賴。
  productionSourceMap: false, // 是否爲生產環境構建生成 source map

  //調整內部的 webpack 配置
  configureWebpack: () => { },

  chainWebpack: () => { },

  // 配置 webpack-dev-server 行爲。
  devServer: {
    open: true, // 編譯後默認打開瀏覽器
    host: '0.0.0.0',  // 域名
    port: 8080,  // 端口
    https: false,  // 是否https
    // 顯示警告和錯誤
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:10001',
        changeOrigin: true, // 是否跨域
        ws: false, // 是否支持 websocket
        secure: false, // 若是是 https 接口，須要配置這個參數
        pathRewrite: { // 能夠理解爲一個重定向或者從新賦值的功能
          '^/api': ''    // '^/api': '/'    這種接口配置出來     http://127.0.0.1:10001/login
        }               // '^/api': '/api'  這種接口配置出來     http://127.0.0.1:10001/api/login
      }
    }
  }
}

3.2.2 高級版及部分Webpack插件介紹

// vue.config.js
const path = require('path');
const resolve = (dir) => path.join(__dirname, dir);

const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 開啓gzip壓縮(可選)
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 開啓gzip壓縮(可選)

const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析，(可選)

const IS_PRODUCTION = ['production', 'prod'].includes(process.env.NODE_ENV); //判斷是不是生產環境
/** 正式配置項，如下參數 都是可選**/
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/site/vue-demo/' : '/', // 打包公共路徑
  indexPath: 'index.html', // 相對於打包路徑index.html的路徑
  outputDir: process.env.outputDir || 'dist', // 'dist', 生產環境構建文件的目錄
  assetsDir: 'static', // 相對於outputDir的靜態資源(js、css、img、fonts)目錄
  lintOnSave: false, // 是否在開發環境下經過 eslint-loader 在每次保存時 lint 代碼，false不須要
  runtimeCompiler: true, // 是否使用包含運行時編譯器的 Vue 構建版本
  productionSourceMap: !IS_PRODUCTION, // 生產環境的 source map,
  // 是否爲 Babel 或 TypeScript 使用 thread-loader。該選項在系統的 CPU 有多於一個內核時自動啓用，僅做用於生產構建。
  parallel: require("os").cpus().length > 1, 
  pwa: {}, // 向 PWA 插件傳遞選項。
  chainWebpack: config => {
    config.resolve.symlinks(true); // 修復熱更新失效
    // 若是使用多頁面打包，使用vue inspect --plugins查看html是否在結果數組中
    config.plugin("html").tap(args => {
      // 修復 Lazy loading routes Error
      args[0].chunksSortMode = "none";
      return args;
    });
    config.resolve.alias // 添加別名
      .set('@', resolve('src'))
      .set('@assets', resolve('src/assets'))
      .set('@components', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@store', resolve('src/store'));
    // 壓縮圖片
    // 須要 npm i -D image-webpack-loader
    config.module
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        optipng: {
          enabled: false
        },
        pngquant: {
          quality: [0.65, 0.9],
          speed: 4
        },
        gifsicle: {
          interlaced: false
        },
        webp: {
          quality: 75
        }
      });
    // 打包分析, 打包以後自動生成一個名叫report.html文件(可忽視)
    if (IS_PRODUCTION) {
      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [{
        analyzerMode: "static"
      }]);
    }
  },
  //webpack的配置項
  configureWebpack: config => {
    // 開啓 gzip 壓縮
    // 須要 npm i -D compression-webpack-plugin
    const plugins = [];
    if (IS_PRODUCTION) {
      plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8
        })
      );
    }
    config.plugins = [...config.plugins, ...plugins];
  },
  css: {
    extract: IS_PRODUCTION,
    requireModuleExtension: false, // 去掉文件名中的 .module
    loaderOptions: {
      // 給 less-loader 傳遞 Less.js 相關選項
      less: {
        // `globalVars` 定義全局對象，可加入全局變量
        globalVars: {
          primary: '#333'
        }
      }
    }
  },
  // 配置 webpack-dev-server 行爲
  devServer: {
    overlay: { // 讓瀏覽器 overlay 同時顯示警告和錯誤
      warnings: true,
      errors: true
    },
    host: "localhost",
    port: 8080, // 端口號
    https: false, // https:{type:Boolean}
    open: false, // 編譯後默認打開瀏覽器
    hotOnly: true, // 熱更新
    // proxy: 'http://localhost:8080'   // 配置跨域處理,只有一個代理
    proxy: { //配置多個跨域
      "/api": {
        target: "http://197.0.0.1:8088",
        changeOrigin: true,
        ws: true, //websocket支持
        secure: false,
        pathRewrite: {
          "^/api": "/"
        }
      },
      "/api2": {
        target: "http://197.0.0.2:8088",
        changeOrigin: true,
        //ws: true,//websocket支持
        secure: false,
        pathRewrite: {
          "^/api2": "/"
        }
      },
    }
  }
}

3.2.3 部分Webpack插件介紹

添加別名 (alias)nginx

在 Vue 項目開發中，常常須要引入不一樣文件目錄的組件，一般是經過「 import 組件名 from ‘ 組件路徑 ’ 」的結構來實現對組件的引用，而當文件路徑較深或者引用的組件跨越的較遠時很容易引用出錯，這裏咱們就要引入alias概念了，「別名」的意思，顧名思義標準名稱之外的名稱。git

const path = require("path");
const resolve = dir => path.join(__dirname, dir);
 
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
      .set("vue$", "vue/dist/vue.esm.js")
      .set("@", resolve("src"))
      .set("@assets", resolve("src/assets"))
      .set("@components", resolve("src/components"))
      .set("@views", resolve("src/views"))
      .set("@router", resolve("src/router"))
      .set("@store", resolve("src/store"));
  }
};

使用 splitChunks 單獨打包第三方模塊web

傳送門：Webpack中 SplitChunks 插件用法詳解

開啓 GZIP 壓縮

GZIP 是網站壓縮加速的一種技術，對於開啓後能夠加快咱們網站的打開速度。通過服務器壓縮，客戶端瀏覽器快速解壓，能夠大大減小網站的流量。
好比： nginx 給你返回 js 文件的時候，會判斷是否開啓 gzip，而後壓縮後再還給瀏覽器。
可是 nginx 其實會先判斷是否有 .gz 後綴的相同文件，有的話直接返回，nginx 再也不進行壓縮處理。而壓縮是要時間的，不一樣級別的壓縮率花的時間也不同。因此提早準備 gz 文件，能夠更加優化，並且你能夠把壓縮率提升點，這樣帶寬消耗會更小。

安裝

npm install --save-dev compression-webpack-plugin
// 或
yarn add compression-webpack-plugin --save-dev

const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 開啓gzip壓縮， 按需引用
const productionGzipExtensions = ['js', 'css']; // 開啓gzip壓縮， 按需寫入

// 調整內部的 webpack 配置
configureWebpack: config => { 
  const plugins = [];
  plugins.push(new CompressionWebpackPlugin({
    filename: "[path].gz[query]",     // 壓縮後的文件策略
    algorithm: "gzip",               // 壓縮方式
    test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),  // 可設置須要壓縮的文件類型
    threshold: 10240,     // 大於10240字節的文件啓用壓縮
    minRatio: 0.8,       // 壓縮比率大於等於0.8時不進行壓縮
    deleteOriginalAssets: false,   // 是否刪除壓縮前的文件，默認false
  }));

  config.plugins = [...config.plugins, ...plugins];
},

若是報錯：TypeError: Cannot read property 'tapPromise' of undefined，可下降 compression-webpack-plugin 的版本；
默認安裝的是7以上的版本，package.json 調整爲  "compression-webpack-plugin": "^5.0.0", 就能夠啦。