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 有用的脚本函数
May 07 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
jQuery中width()方法用法实例
Dec 24 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
图解JavaScript中的this关键字
May 28 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
js实现缓动动画
Nov 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
学习php笔记 字符串处理
2010/10/19 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
2011/10/01 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
2016/04/28 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
2019/09/25 Javascript
python实现连接mongodb的方法
2015/05/08 Python
python中引用与复制用法实例分析
2015/06/04 Python
Python中的默认参数详解
2015/06/24 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
tensorflow 限制显存大小的实现
2020/02/03 Python
tensorflow多维张量计算实例
2020/02/11 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
印度尼西亚电子产品购物网站:Kliknklik
2018/06/05 全球购物
拖鞋店创业计划书
2014/01/15 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
介绍信的格式
2015/01/30 职场文书
2015最新民情日记范文
2015/06/26 职场文书
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang