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