打包

打包命令

npm run build

打包之后打开index.html页面发现页面空白

解决方案:

config/index.js 文件

// 1. build下面的assetsPublicPath从原来的'/'改为'./'

assetsPublicPath: './'

build/webpack.prod.conf.js 文件

// 2. 在output下面添加 publicPath: '/gameco/'

// 特别说明 gameco为我打包之后路径访问的起始路径名称 可自行修改

output: {

path: config.build.assetsRoot,

filename: utils.assetsPath('js/[name].[chunkhash].js'),

chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),

publicPath: '/gameco/'

}

build/webpack.base.config.js 文件

// 原来的代码

output: {

path: config.build.assetsRoot,

filename: '[name].js',

publicPath: process.env.NODE_ENV === 'production'

? config.build.assetsPublicPath

: config.dev.assetsPublicPath

},

// 修改后的代码

output: {

path: config.build.assetsRoot,

filename: '[name].js',

publicPath: process.env.NODE_ENV === 'production'

? './' + config.build.assetsPublicPath

: './' + config.dev.assetsPublicPath

},

动态修改接口地址

实现的方案就是在vue的main.js文件中使用axios读取接口地址配置文件, 再将接口url存入浏览器localStorage中, 最后在调用接口时获取url使用

首先在打包的时候输出配置文件

build/webpack.prod.conf.js

//让打包的时候输出可配置的文件

// generate-asset-webpack-plugin 需要进行安装

const GenerateAssetPlugin = require('generate-asset-webpack-plugin');

const createServerConfig = function(compilation){

let cfgJson={ApiUrl:"接口地址"};

return JSON.stringify(cfgJson);

}

// 在plugins中添加以下代码

//让打包的时候输入可配置的文件

new GenerateAssetPlugin({

filename: 'serverConfig.json', // 配置文件名

fn: (compilation, cb) => {

cb(null, createServerConfig(compilation));

},

extraFiles: []

})

在main.js中获取接口地址

// 等api地址获取到再加载vue 防止vue异步加载接口请求的url为 undefined

let jsonUrl;

process.env.NODE_ENV === 'production' ? jsonUrl = 'serverConfig.json' : jsonUrl = '../static/serverConfig.json'

axios.get(jsonUrl).then((result)=>{

if (process.env.NODE_ENV === 'production') {

let apiUrl = result.data.ApiUrl;

localStorage.setItem("baseUrl", apiUrl);

} else {

localStorage.setItem("baseUrl", "/api");

}

router.beforeEach((to, from, next) => {

initMenu(router, store);

next();

});

new Vue({

el: '#app',

router,

store,

components: {App},

template: ''

})

}).catch((error)=>{console.log(error)});

调用接口时动态使用url

定义全局api调用方法, 在方法中获取localStorage中的接口地址并使用axios调用

export default {

postRequest: (url, params) => {

let base = localStorage.getItem("baseUrl");

return axios({

method: 'post',

url: `${base}${url}`,

data: params,

timeout: 1000 * 60 * 2,

/*transformRequest: [function (data) {

return JSON.stringify(data)

}],*/

headers: {

'Content-Type': 'application/json; charset=UTF-8'

}

})

},

}

以上仅为本人项目中实际使用到的方案, 仅作参考交流

本文地址：https://blog.csdn.net/qq_26492735/article/details/87968347

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！