## 配置環境變量
1. 環境變量配置規則
你可以在你的項目根目錄中放置下列文件來指定環境變量
```
.env # 在所有的環境中被載入
.env.local # 在所有的環境中被載入，但會被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略
```
文件內容（是以key-value形式 出現的鍵值對）
~~~
FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value
~~~
1. 環境文件加載優先級
為一個特定模式準備的環境文件 (例如 `.env.production`) 將會比一般的環境文件 (例如 `.env`) 擁有更高的優先級。
此外，Vue CLI 啟動時已經存在的環境變量擁有最高優先級，并不會被 `.env` 文件覆寫。
`.env` 環境文件是通過運行 `vue-cli-service` 命令載入的，因此環境文件發生變化，你需要重啟服務。
2. vue cli三種模式
`development` 模式用于 `vue-cli-service serve`
`test` 模式用于 `vue-cli-service test:unit`
`production` 模式用于 `vue-cli-service build` 和 `vue-cli-service test:e2e`
你可以通過傳遞 `--mode` 選項參數為命令行覆寫默認的模式。例如，如果你想要在構建命令中使用開發環境變量：
~~~
vue-cli-service build --mode development
~~~
>[info]當運行 `vue-cli-service` 命令時，所有的環境變量都從對應的[環境文件](https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F)中載入。如果文件內部不包含 `NODE_ENV` 變量，它的值將取決于模式，例如，在 `production` 模式下被設置為 `"production"`，在 `test` 模式下被設置為 `"test"`，默認則是 `"development"`。
## 配置服務器
端口配置
```
module.exports = {
devServer: {
port: 9000//配置服務器端口號
}
};
```
## 配置webpack
[Webpack中Plugin配置文檔](https://www.webpackjs.com/configuration/plugins/#plugins)
配置生產環境下的壓縮資源插件
安裝compression-webpack-plugin
~~~
npm install compression-webpack-plugin --save-dev
~~~
在根目錄下vue.config.js文件添加新配置
~~~
constCompressionWebpackPlugin\=require('compression-webpack-plugin');
constproductionGzipExtensions\=\['js','css'\];
constisProd\=process.env.NODE\_ENV\==='production';
configureWebpack:config\=>{
//?生產環境下將資源壓縮成gzip格式
if(isProd){
//?add?`CompressionWebpack`?plugin?to?webpack?plugins
config.plugins.push(
newCompressionWebpackPlugin({
algorithm:'gzip',
test:newRegExp('\\\\.('+productionGzipExtensions.join('|')+')$'),//??????test:?/\\.(js|css|html|svg)$/,
threshold:10240,
minRatio:0.8
})
);
}
}
~~~
