美文网首页vue
关于vue配置多环境

关于vue配置多环境

作者: Aubrey_b8c0 | 来源:发表于2018-06-05 16:27 被阅读12次

比如我要配置一个测试环境用的
在config文件夹里,新建一个pre.env.js(自定义名字)
'use strict'
module.exports = {
NODE_ENV: '"pre"' // 自定义名字
}

在package.json中 script标签里加上一句
"build:pre": "cross-env NODE_ENV=pre env_config=pre node build/build.js"

这里的意思是,当执行npm run build:pre时,执行config文件里面pre的文件

直接这样做是会报错的,还要安装cross-env这个包
使用 npm install --save cross-env

在使用vue-cli时,npm run build 是被默认写成执行pro(生产环境)的,因此,执行以上代码,并没有正确运行测试环境。

在build文件夹里,webpack.prod.conf.js文件:

可见原来的env是引入的prod.env:
// const env = require('../config/prod.env')

修改为:
const env = require ('../config/' + process.env.env_config + '.env')

自己可以打印一下 这时process.env.env_config 所指向的时npm run build:传的值

这时正确使用npm run build:pre 是可以打包成功的,
但是由于将原本固定的prod.env修改为了动态的,
所以在执行npm run build 会报错
因为在package.json中 原有的script中build写的执行文件直接是build.js,指向的是原来写死的prod.env.js文件。
需要修改biuld:
"cross-env NODE_ENV=production env_config=prod node build/build.js"
跟build:pre不同的是 node_env需要指向config中的文件名称,与之对应的是env_config的名字。
这样便可以打包成功了。
build.js中有一段描述:
const spinner = ora('building for prod....')
可以动态修改为:
const spinner = ora('building for ' + process.env.env_config)

相关文章

  • 关于vue配置多环境

    比如我要配置一个测试环境用的在config文件夹里,新建一个pre.env.js(自定义名字)'use stric...

  • vue: 多环境配置

    一、 安装cross-env 二、 修改package.json文件 1、打测试包和生产包 config文件夹中新...

  • vue配置多环境

    安装cross-env package.json中配置: 根目录下新建.env.uat文件内容同.env.stag...

  • vue多页应用

    vue如何将单页面改造成多页面应用 vue单页多页的开发环境配置+vue的开发思路

  • webpack4 构建vue多页工程

    webpack4 构建vue多页工程 多页应用开发环境配置 构建开发环境的配置,需要使用到webpack-dev-...

  • vue-cli 多环境配置

    vue-cli 多环境配置 打包命令--mode xxx 用来区别是环境image 基本配置项目根目录下创建 .e...

  • vue 多环境配置打包

    一、在package.json下添加打包配置 二、在跟目录下创建.env.production和.env.test...

  • vue多环境配置方案

    一般服务器分为本地环境,测试环境,正式环境,如果每次都要修改配置就很麻烦,总结一下我使用的方法 修改执行命令 修改...

  • 前端实践VUE

    1:环境搭建 首先我们需要配置下环境,安装node.js,可以方便编译vue文件,配置vue-cli,配置淘宝镜像...

  • VUE项目多环境配置.md

    web项目开发,通常需要有开发环境、测试环境和生产环境,用于配置不同的环境变更,如调用本地接口、测试接口和生产接口...

网友评论

    本文标题:关于vue配置多环境

    本文链接:https://www.haomeiwen.com/subject/fkcmsftx.html