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 相关文章推荐
分享别人写的一个小型js框架
Aug 13 Javascript
js 提交和设置表单的值
Dec 19 Javascript
用jquery存取照片的具体实现方法
Jun 30 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
javascript中eval解析JSON字符串
Feb 27 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
JS中的phototype详解
Feb 04 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
Jquery Fade用法详解
Nov 06 jQuery
详解微信小程序中组件通讯
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中长文章分页显示实现代码
2012/09/29 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
jQuery代码性能优化的10种方法
2016/06/21 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
[01:00:13]完美世界DOTA2联赛 LBZS vs Forest 第一场 11.07
2020/11/09 DOTA
Python中bisect的用法
2014/09/23 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python内建数据结构详解
2016/02/03 Python
处理textarea中的换行和空格
2019/12/12 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
印尼旅游网站:via
2017/11/12 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
Ruby如何定义一个类
2012/10/08 面试题
生物科学专业职业规划书范文
2014/02/11 职场文书
环境保护建议书
2014/08/26 职场文书
2015年医院工作总结范文
2015/04/09 职场文书
我的生日感言
2015/08/03 职场文书
药房管理制度范本
2015/08/06 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL