vuecli3中webpack配置相关

5,206 阅读3分钟

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分割代码

这个配置有点多,我单独写了篇文章介绍。juejin.cn/post/684490…

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