时间:2021-05-26
在新建好的项目中,一般执行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-dev6)对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以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
用cli3搭建的vue项目号称零配置文件,为了方便打包(不用手动来回改不同环境进行打包)那么我们在需要打包的时候分不同环境打包怎么办呢1.在根目录下创建三个配置
在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法。(欢迎纠错,
vue项目打包后上传至GitHub,并实现github-pages的预览1.打包vue项目vue项目:命令行输入打包命令npmrunbuild,生成了dist文
以vue创建的官方例子为例子,我们在开发环境的时候会npmrundev,生成而想要打包成一份很简单,只需要npmrunbuild这个命令这两种命令的配置文件在c
1.之前在项目测试环境打包的时候,js文件打包出来没有hash值,但是生产环境打包出来却又hash值当时只配置了filenameHashing:true,这样是