Vue 打包问题以及动态修改接口地址

打包

打包命令

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: '<App/>'
  })
}).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