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 相关文章推荐
json对象转字符串如何实现
Dec 02 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
ie9 提示'console' 未定义问题的解决方法
Mar 20 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
Sep 12 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
详解vue高级特性
Jun 09 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
Search Engine Friendly的URL设计
2006/10/09 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
javascript下查找父节点的简单方法
2007/08/13 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
js addDqmForPP给标签内属性值加上双引号的函数
2016/12/24 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
Python解惑之True和False详解
2017/04/24 Python
Python基于SMTP协议实现发送邮件功能详解
2018/08/14 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
abstract是什么意思
2012/02/12 面试题
Python里面如何实现tuple和list的转换
2012/06/13 面试题
电气工程自动化求职信
2014/03/14 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
2015年计划生育协会工作总结
2015/05/13 职场文书
网络营销实训总结
2015/08/03 职场文书
详解Nginx 工作原理
2021/03/31 Servers
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
springboot用户数据修改的详细实现
2022/04/06 Java/Android