VUE项目打包之后修改配置文件(包括后台地址,图片公共路径等)

此文方案略复杂且有点冗余,可选择不看!!!!!!

优化方案指路 VUE项目打包之后修改配置文件(包括后台地址,图片公共路径等)

本文是在借鉴了vue实现分环境打包步骤

https://blog.csdn.net/zuoyiran520081/article/details/80812788

的基础上实现了自己想要的效果:打包后可以修改地址
项目目录及需要修改的文件如下图
在这里插入图片描述

首先修改config配置文件
修改config内的dev.env.js文件:

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"',
})

修改config内的prod.env.js文件:

"use strict";
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"'
};

修改config内的test.env.js文件:

"use strict";
const merge = require("webpack-merge");
const devEnv = require("./dev.env");

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
  ENV_CONFIG: '"test"'
});

对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']

config中的index.js 文件中build部分代码修改如下:

build: {
   prodEnv: require('./prod.env'),
   testEnv: require('./test.env'),
   // Template for index.html
   index: path.resolve(__dirname, '../dist/index.html'),
// ····余下的代码就不写了
}

安装cross-en

npm install cross-env –save-dev 

对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()

修改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"
},

在utils文件下新建config.js,对环境进行判断并切换,内容如下:

/*
 * 配置编译环境和线上环境之间的切换
 * baseUrl: 域名地址
 * routerMode: 路由模式
 */
let baseUrl = "";
let picSrc = "";
let exportSrc = "";

//注:下面的baseUrl地址为假地址,只是模拟的,无法调通。
if (process.env.NODE_ENV == "development") {
  baseUrl = window.api.baseUrl;
  picSrc = window.api.picSrc;
  exportSrc = window.api.exportSrc;
} else if (process.env.NODE_ENV == "production") {
  baseUrl = window.api.baseUrl;
  picSrc = window.api.picSrc;
  exportSrc = window.api.exportSrc;
} else if (process.env.NODE_ENV == "testing") {
  baseUrl = window.api.baseUrl;
  picSrc = window.api.picSrc;
  exportSrc = window.api.exportSrc;
}

export default { baseUrl, picSrc, exportSrc };

想要test环境下则运行:

npm run build--test

相应的改为production环境则运行:

npm run build--prod

在static文件下新建config.js,写入地址,用于修改,打包后此文件还在

window.api = {
  baseUrl: "http://127.1.1.1:8080",
  picSrc: "http://127.1.1.1:8080",
  exportSrc: "http://127.1.1.1:8080"
};

然后项目中导入utils里的config.js使用地址就可以了

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值