vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
在新建好的项目中,一般执行npm run build就是打包了,但此时只能打包到一个环境,不同环境需要配置不同的地址,可以手动更改接口的地址,也可以自行配置命令而不需要每次打包进行地址切换,步骤如下:
文件结构如下图:
1)在config文件内新建test.env.js文件:
- 'use strict'
- module.exports = {
- NODE_ENV: '"testing"',
- ENV_CONFIG:'"test"'
- }
2)修改config内的prod.env.js文件:
- 'use strict'
- module.exports = {
- NODE_ENV: '"production"',
- ENV_CONFIG:'"prod"'
- }
3)对build中webpack.prod.conf.js做如下修改:
- // const env = require('../config/prod.env') //原始代码
或者为
- // const env = process.env.NODE_ENV === 'testing' //原始代码
- // ? require('../config/test.env')
- // : require('../config/prod.env')
- // console.log(process.env.NODE_ENV);
修改为:
- const env = config.build[process.env.env_config+'Env']
4)config中的index.js 文件中build部分代码修改如下:
- build: {
- prodEnv: require('./prod.env'),
- testEnv: require('./test.env'),
- // Template for index.html
- index: path.resolve(__dirname, '../dist/index.html'),
- // ····余下的代码就不写了
- }
5)确认安装cross-env
- npm install cross-env –save-dev
6)对build文件夹下的build.js的修改:
- 'use strict'
- require('./check-versions')()
- // process.env.NODE_ENV = 'production' //注释掉
- const ora = require('ora')
- const rm = require('rimraf')
- const path = require('path')
- const chalk = require('chalk')
- const webpack = require('webpack')
- const config = require('../config')
- const webpackConfig = require('./webpack.prod.conf')
- // const spinner = ora('building for production...') //注释掉
- var spinner = ora('building for ' + process.env.NODE_ENV + ' of ' + process.env.env_config+ ' mode...' )
- spinner.start()
7)修改package.json文件(在script里面添加):
- "scripts": {
- "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
- "start": "npm run dev",
- "unit": "jest --config test/unit/jest.conf.js --coverage",
- "e2e": "node test/e2e/runner.js",
- "test": "npm run unit && npm run e2e",
- "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
- "build": "node build/build.js",
- "build--test": "cross-env NODE_ENV=testing env_config=test node build/build.js",
- "build--prod": "cross-env NODE_ENV=production env_config=prod node build/build.js"
- },
8)在common文件下新建env.js,对环境进行判断并切换,内容如下:
- /*
- * 配置编译环境和线上环境之间的切换
- * baseUrl: 域名地址
- * routerMode: 路由模式
- */
- let baseUrl = '';
- let routerMode = 'history';
- let DEBUG = false;
- let cancleHTTP = [];//取消请求头设置;
- //注:下面的baseUrl地址为假地址,只是模拟的,无法调通。
- if (process.env.NODE_ENV == 'development') {
- baseUrl = "https://10.248.65.100/GetTravelMethod";
- DEBUG = true;
- }else if(process.env.NODE_ENV == 'production'){
- baseUrl = "https://10.248.65.200/GetTravelMethod";
- DEBUG = false;
- }else if(process.env.NODE_ENV == 'testing'){
- baseUrl = "https://10.248.65.150/GetTravelMethod";
- DEBUG = false;
- }
- export{
- baseUrl,
- routerMode,
- DEBUG,
- ROLE,
- cancleHTTP
- }
想要test环境下则运行:
- npm run build--test
相应的改为production环境则运行:
- npm run build--prod
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)的更多相关文章
- [转]MonkeyRunner在Windows下的Eclipse开发环境搭建步骤(兼解决网上Jython配置出错的问题)
MonkeyRunner在Windows下的Eclipse开发环境搭建步骤(兼解决网上Jython配置出错的问题) 网上有一篇shangdong_chu网友写的文章介绍如何在Eclipse上配置M ...
- vue-cli3实现分环境打包步骤(给不同的环境配置相对应的打包命令)
在vue-cli3的项目中,npm run serve时会把process.env.NODE_ENV设置为‘development’:npm run build 时会把process.env.NODE ...
- Hadoop分布环境搭建步骤,及自带MapReduce单词计数程序实现
Hadoop分布环境搭建步骤: 1.软硬件环境 CentOS 7.2 64 位 JDK- 1.8 Hadoo p- 2.7.4 2.安装SSH sudo yum install openssh-cli ...
- Vue项目分环境打包的实现步骤
转:https://blog.csdn.net/xinzi11243094/article/details/80521878 方法一:亲测真的有效 在项目开发中,我们的项目一般分为开发版.测试版.Pr ...
- Vue 项目分环境打包
我们开发项目的时候,用vue-cli 2.x版本新建的项目,只有dev, pro两种开发环境, 有时需要个test环境来给测试使用,所以找了很多方法,总结了个最简单的方法来给大家使用 packa ...
- vue项目打包步骤及运行打包项目
(1)项目打包 终端运行命令 npm run build 打包成功的标志与项目的改变,如下图: 点击index.html,通过浏览器运行,出现以下报错,如图: 那么应该如何修改呢? 具体步骤如下 ...
- Spring boot项目分环境Maven打包,动态配置文件,动态配置项目
Spring boot Maven 项目打包 使用Maven 实现多环境 test dev prod 打包 项目的结构 在下图中可用看出,我们打包时各个环境需要分开,采用 application-环境 ...
- 搭建vue开发环境的步骤,六步完成
搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:h ...
- Linux vagrant+virtualbox环境搭建步骤
Linux vagrant+virtualbox环境搭建步骤 Vagrant 是一款用来构建虚拟开发环境的工具,非常适合 php/python/ruby/java 这类语言开发 web 应用. 我们可 ...
随机推荐
- Android笔记之Fragment中创建ViewModel的正确方式
之前一直都是这么写的 pageViewModel = ViewModelProviders.of(this).get(PageViewModel.class); //参数this是当前fragment ...
- BeanShell Sampler生成uuid
- 使用雪碧图Css Sprite精灵 | 加速网页响应速度
什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...
- VM 设置windows与Ubuntu 共享文件
虚拟机 ---> 设置 ---> 选项 ---> 共享文件夹 ---> 选择总是启用 添加Windows下的路径 ---> 确定 1. 先 ...
- redis通过命令传参以及主从复制
config set appendonly yes 临时生效 如果想永久生效的话,执行 config rewrite 并不是所有的都支持修改 config set bind ip 修改bind参 ...
- 【bug】vue同一组件使用
vue使用同一个组件渲染,进行切换过程中会存在数据保存的情况. 比如路由切换,进行渲染的页面来自同一个组件,这个时候,要在监听路由的时候,将数据重新初始化
- vue-router如何参数传递
1.我们用<router-link>标签中的to属性进行传参,需要您注意的是这里的to要进行一个绑定,写成:to 先来看一下这种传参方法的基本语法: <router-link :to ...
- sql(7)
EXCEPT是指在第一个集合中存在,但是不存在于第二个集合中的数据. EXCEPT 子句/运算符用于将两个 SELECT 语句结合在一起,并返回第一个 SELECT 语句的结果中那些不存在于第二个 S ...
- E: Sub-process /usr/bin/dpkg returned an error code (1)解决办法
解决方法: 先将info文件夹更名 sudo mv /var/lib/dpkg/info /var/lib/dpkg/info.bk 新建一个新的info文件夹 sudo mkdir /var/lib ...
- hdu多校第二场1009 (hdu6599) I Love Palindrome String 回文自动机/字符串hash
题意: 找出这样的回文子串的个数:它本身是一个回文串,它的前一半也是一个回文串 输出格式要求输出l个数字,分别代表长度为1~l的这样的回文串的个数 题解: (回文自动机和回文树是一个东西) 首先用回文 ...