vue-cli项目配置多环境的详细操作过程


Posted in Javascript onOctober 30, 2018

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

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

详细操作过程

1.在 package.json 中添加 test 命令

"scripts": {
  "dev": "cross-env NODE_ENV=online node build/dev-server.js --host 192.168.1.8",
  "local": "cross-env NODE_ENV=local node build/dev-server.js",
  "build": "node build/build.js",
  "build:prod": "cross-env NODE_ENV=production env_config=prod node build/build.js",
  "build:sit": "cross-env NODE_ENV=production env_config=sit node build/build.js"
 },

2.创建环境文件 (BASE_API 为接口的主地址)

/config/dev.env.js (开发环境)

module.exports = {
 NODE_ENV: '"development"',
 ENV_CONFIG: '"dev"',
 BASE_API: '"http://192.168.1.7"' // 这里是后端和后端做开发测试
}
/config/sit.env.js (测试环境,测试服)

module.exports = {
 NODE_ENV: '"production"',
 ENV_CONFIG: '"sit"',
 BASE_API: '"http://test.todomore.cn"'
}
/config/prod.env.js (生产环境,正式服)

module.exports = {
 NODE_ENV: '"production"',
 ENV_CONFIG: '"prod"',
 BASE_API: '"http://www.todomore.cn"'
}

3.修改 config/index.js

var path = require("path")

module.exports = {
 // 开发环境配置
 dev: {
  assetsSubDirectory: "static",
  assetsPublicPath: "/",
  port: 7127,
  // context: [
  //  //代理路径
  //  "/shopping",
  // ],
  // proxypath: "http://localhost:7127",
  cssSourceMap: false
 },
 // 生产环境配置
 build: {
  index: path.resolve(__dirname, "../../../public/store/index.html"),
  assetsRoot: path.resolve(__dirname, "../../../public/store"),
  assetsSubDirectory: "static",
  assetsPublicPath: "/store/",
  productionSourceMap: true,
  // Surge or Netlify already gzip all static assets for you.
  // Before setting to `true`, make sure to:
  // npm install --save-dev compression-webpack-plugin
  productionGzip: false,
  productionGzipExtensions: ["js", "css"]
 }
}

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: '/',             // 资源公共路径

总结

以上所述是小编给大家介绍的vue-cli项目配置多环境的详细操作过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript字符串拼接的效率问题
Dec 25 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
微信小程序  checkbox组件详解及简单实例
Jan 10 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
详解微信小程序中组件通讯
Oct 30 #Javascript
vue移动端项目缓存问题实践记录
Oct 29 #Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 #Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 #Javascript
vue-router权限控制(简单方式)
Oct 29 #Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 #Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
PHP依赖倒置(Dependency Injection)代码实例
2014/10/11 PHP
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
[49:58]完美世界DOTA2联赛PWL S3 Magma vs DLG 第一场 12.18
2020/12/19 DOTA
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Python3标准库总结
2019/02/19 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
python中数字是否为可变类型
2020/07/08 Python
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
猫咪家具:CatsPlay
2018/11/03 全球购物
自动化职业生涯规划书范文
2014/01/03 职场文书
2014财务年终工作总结
2014/12/08 职场文书
刑事案件上诉状
2015/05/23 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android