webpack开发vue2项目中的一些坑（1、跨域 2、打包后后端访问一片空白3、加载第三方库的字体文件出错4、加载背景图出错）

本文主要是介绍webpack开发vue2项目中的一些坑（1、跨域 2、打包后后端访问一片空白3、加载第三方库的字体文件出错4、加载背景图出错），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、在开发调试过程中，解决跨域的问题

例：本地服务器：localhost:3030  服务器地址：192.111.1.1:4000（虚构）

webpack配置：

devServer: {contentBase: "./static/",host: 'localhost',port: 3030,inline: true,hot: true,noInfo: true,proxy: {'/api/*': {target: 'http://192.111.1.1:4000',secure: false,changeOrigin: false // false}

	]

}

js接口写法(不用写域名)

this.$http('/api/login' ,{}).then()

2、打包后部署时的一些坑（注：static文件夹和index.htm平级）

（1 )打包发布后，访问一片空白，除了加载到index.html的title信息

 假如java后端存放前端文件的文件夹为WebApps

前端在router/index.js中指定base(名称可为项目名称)

（2）加载第三方字体文件出错404，例如加载了iview的css和字体

将字体文件拷贝到static/fonts文件下，

css拷贝到static/css文件下，

修改css中的字体文件引用路径，css在index.html中引入，不在router/index.js中通过@import引入

（3）背景图加载404

比如我在router/index.js中指定了base名称为‘zxy’,全局图片存放在static/images下,修改为绝对路径，

ps:在本地开发环境中需要去掉/zxy

(4) 执行完以上步骤，再修改config/index.js

assetsPublicPath:' ./ '

（5）将打包后的dist文件夹，修改名称为zxy, 将整个文件放在后端目录WebApps下面，就可以访问了

例如：登录页面：192.111.1.1/zxy/login

 

这篇关于webpack开发vue2项目中的一些坑（1、跨域 2、打包后后端访问一片空白3、加载第三方库的字体文件出错4、加载背景图出错）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---