問題：

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中拿到

總結

以上是生活随笔為你收集整理的vue修改入口文件名字_webpack打包vue项目，可修改配置文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。