Vue单页面项目配置CDN及打包路径解决

目标:用Vue cli 构建项目打包,打包完成后,直接将index.html文件及static文件夹上传至CDN静态服务器
有以下几处需要修改:

config/index.js

build 下的 assetsPublicPath 需要改为 ‘./‘,即改为index.html文件的相对路径

main.js

由于并不是部署在服务器中,需要将路由相关文件移除,并且不能引入 vue-router,直接引入App.vue 组件即可

css文件中路径问题

在css文件中 background-image 使用图片路径无法被正确打包,需要在build/utils.js文件中的 ExtractTextPlugin 插件中如下配置:

1
2
3
4
5
6
7
8
9
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', //主要是增加此行,路径可按实际情况配置
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}