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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
javascript 对象定义方法 简单易学
Mar 22 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
Apr 02 Javascript
Angularjs 基础入门
Dec 26 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
Ajax请求时无法重定向的问题解决代码详解
Jun 21 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
angular4实现带搜索的下拉框
Mar 25 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
php mssql 日期出现中文字符的解决方法
2009/03/10 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
php设计模式之单例模式代码
2016/06/11 PHP
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
JavaScript中string对象
2015/06/12 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
python选择排序算法的实现代码
2013/11/21 Python
Python解释执行原理分析
2014/08/22 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
python for和else语句趣谈
2019/07/02 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
python机器学习实现决策树
2019/11/11 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
2014年小学教学工作总结
2014/11/13 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
导游词之潮音寺
2019/09/26 职场文书