## 配置环境变量
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
})
);
}
}
~~~
