欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-09 19:59:22
打包命令npm run build打包之后打开index.html页面发现页面空白解决方案:...

打包

打包命令
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