vue-cli 项目配置多环境

原创 黎云锐 教程 前端 3639阅读 20 天前 举报
vue-cli 项目配置多环境

vue-cli 默认只提供了 dev 和 prod 两种环境。但其实正真的开发流程可能还会多一个 sit 或者 stage 环境,

就是所谓的测试环境和预发布环境。所以我们就要简单的修改一下代码。其实很简单就是设置不同的环境变量

详细操作过程

1.在 package.json 中添加 test 命令
2.创建环境文件 (BASE_API 为接口的主地址)
3.修改 config/index.js
4.安装插件(如果 package.json 里面本来就有 cross-env 的话就不用这一步了)

npm install --save cross-env
修改 webpack.prod.conf
原来的 env 是引入的 prod.env:
// const env = require('../config/prod.env')
修改为:

const env = require("../config/" + process.env.env_config + ".env")
6.修改提示语

跟 build:pre 不同的是 node_env 需要指向 config 中的文件名称,与之对应的是 env_config 的名字。

这样便可以打包成功了。

build.js 中有一段描述:

js const spinner = ora("building for prod....")

可以动态修改为:

js const spinner = ora("building for " + process.env.env_config)

使用命令

生产环境(正式服)

npm run build:prod

测试环境(测试服)

npm run build:sit
生成在根目录 dist 的配置

index: path.resolve(dirname, '../dist/index.html'), // 入口文件路径
assetsRoot: path.resolve(
dirname, '../dist'), // 生成在/dist
assetsSubDirectory: 'static', // 资源子目录
assetsPublicPath: '/', // 资源公共路径

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复