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 相关文章推荐
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
判断客户浏览器是否支持cookie的示例代码
Dec 23 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
js实现点击展开隐藏效果(实例代码)
Sep 28 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
详解vue中localStorage的使用方法
Nov 22 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 前加at符合@的作用解析
2015/07/31 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
js继承 Base类的源码解析
2008/12/30 Javascript
javascript 验证日期的函数
2010/03/18 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
获取url中用&隔开的参数实例(分享)
2017/05/28 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
在Python中使用MySQL--PyMySQL的基本使用方法
2019/11/19 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
名企HR怎样看待求职信
2014/02/23 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电