1.环境变量和模式

在开发项目过程中，正常情况下会有本地开发环境，测试线环境，线上正式线环境等，不同环境的配置会有所不同，比如我们服务器地址，接口地址等等。所以我们要区分，那就需环我们配置境变量和模式，来管理。

官方文档：cli.vuejs.org/zh/guide/mo…

一、环境变量的4种方式

在官方文档中，CLI3.0有四种方式来指定环境变量：

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

看官方上的说明，意思就是：不同的文件会在不同环境中被载入，比如我们这样写：

.env                     # 会在所有的环境中被载入
.env.local               # 会在所有环境中载入，但只限于本地，不会被git跟踪，git会忽略掉它
.env.development         # 只在开发环境中被载入
.env.production          # 只在生产环境中被载入
.env.development.local   # 会在本地开发环境中载入，不会被git跟踪，git会忽略掉它

这些环境变量都是在项目根目录下建立的，如果写有变量，那么我们运行相关命令的时候，会根据不同环境载入不同的文件，以至于能正确读到文件里的变量。载入的优先级别是：

.env.[mode].local > .env.[mode] > .env

二、3种模式

默认情况下，一个 Vue CLI 项目有三个模式:

development    # 模式用于 vue-cli-service serve
production     # 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test           # 模式用于 vue-cli-service test:unit

我们可以通过为 .env 文件增加后缀来设置某个模式下特有的环境变量，意思就是：某些文件只会在某个模式下被载入，比如： .env.development 的文件就只会在 development 模式下被载入。

当然，我们是可以通过参数来修改默认模式的。通过–mode 后面跟上指定模式名来修改，–mode development。比如我们想在build构建的时候，使用开发环境的变量。

"build": "vue-cli-service build --mode development"
// 或者我们可以新加入一个：
"dev-build": "vue-cli-service build --mode development"

三、代码中使用环境变量

只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中。你可以在应用的代码中这样访问它们：

console.log(process.env.VUE_APP_SECRET)

当然，除了 VUE_APP_*的自定义变量之外，还有两个特殊的变量，我们始终都可以使用：

NODE_ENV  - 会是 "development"、"production" 或 "test" 中的一个。具体的值取决于应用运行的模式。
BASE_URL  - 会和 vue.config.js 中的 publicPath 选项相符，即你的应用会部署到的基础路径。

四、配置实践

首先，我们在根目录下新建.env、.env.development、.env.development.local 和.env.production，它们的代码分别为：

// env
// 这里放置共有的环境变量
VUE_APP_URL=eeeeee
VUE_APP_text=zheshism

// env.production
// 这里放置生产环境变量
NODE_ENV=production
VUE_APP_URL=pppppp

// env.development
// 这里放置开发环境变量
NODE_ENV=development
VUE_APP_URL=dddddddd

// env.development.local
// 这里放置开发环境本地有差异性变量
NODE_ENV=development.local
VUE_APP_URL=dddlllll

在页面使用时，比如Home.vue页面

当我们运行npm run serve 这个命令时，默认的是develpoment模式，会加载我们建的.env,.env.development,.env.development.local文件.

根据环境加载优先级，也就是 .env.development.local > .env.development > .env的优先级。

最后会显示.env.development.local的内容：如图：

2.开发时的跨域设置

如果我们有单独的后端开发服务器 API，并且希望在同一域名下发送 API 请求, 我们可以配置跨域，具体可以根据文档配置自己的需求。www.webpackjs.com/configurati…

3.SplitChunksPlugin分割代码

其它配置，后续实际开发中遇到再补充