问题:
vue项目打包完成后,如需改变配置文件中的信息,比如域名修改(如下图config.js),是不可能在配置文件中直接更改的,因为配置文件是前端写死的,这时只能手动更改项目中的配置,然后重新打包npm run build
解决办法:
1、先安装generate-asset-webpack-plugin插件
2、在vue项目的webpack.prod.conf.js:文件中添加如下代码
var packConfig = require('../src/config')//引入原配置文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin')//引入插件
var createServerConfig = function(compilation){//声明转换函数,将对象转为json字符串
return JSON.stringify(packConfig)
}
plugins里添加
new GenerateAssetPlugin({//生成文件,并添加入内容
filename: 'config.json',
fn: (compilation, cb) => {
cb(null, createServerConfig(compilation));
},
extraFiles: []
})
3、在vue项目的main.js入口文件中添加如下代码:
import axios from 'axios'//引入一个ajax封装工具
import storage from 'services/storage'//引入对缓存操作的封装工具
var getConfigJson = function () {
//声明一个函数,用来读取json文件并将其内容存入缓存
axios.get('config.json').then((result) => {
//读取文件
storage.setItem('config', result.data)
}).catch((error) => {
console.log(error)
})
}
4、在项目中配置请求接口时,可从localstorage中拿到