vue-cli-service serve

官方文档

用法:vue-cli-service serve [options] [entry]

选项:

--open 在服务器启动时打开浏览器
--copy 在服务器启动时将 URL 复制到剪切版
--mode 指定环境模式 (默认值:development)
--host 指定 host (默认值:0.0.0.0)
--port 指定 port (默认值:8080)
--https 使用 https (默认值:false)

场景

实际项目开发中,我们会有多个环境,开发测试生产等区分。为了便于使用,可以配置不同环境的文件

环境变量

官方文档

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

一个环境文件只包含环境变量的“键=值”对:

FOO=bar
VUE_APP_NOT_SECRET_CODE=some_value

警告

不要在你的应用程序中存储任何机密信息(例如私有 API 密钥)!

环境变量会随着构建打包嵌入到输出代码,意味着任何人都有机会能够看到它。

根据以上文件,我们可以创建.env.development.env.production.env.test等文件来配置不同环境常量

方案一

package.jsonscript中添加配置:

"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"serveTest": "vue-cli-service serve --mode test"
}

如果环境多个,并有可能需要配置不同参数,这样就需要添加很多个配置。显得不够灵活,那我们为什么不直接在npm run的时候添加参数呢?
node命令的入参获取本质上就是用process.argv获取。但是我们直接在npm run serve后面添加参数vue.config.jsprocess.argv获取不到入参,也就是说后面加的参数都无效。

方案二

解决办法就是加--
npm 脚本传入参数,要使用--标明。

npm run serve -- --mode test

等同于

npm run serveTest

延伸

process.argv: <string[]>
process.argv 属性返回数组,其中包含启动 Node.js 进程时传入的命令行参数。 第一个元素将是 process.execPath