Vue项目部署资源路径问题

本文主要解决两个问题：

1、vue-cli发布时 js，css文件路径错误
2、vue-cli发布时js、css文件正常，但是图片路径错误

问题:

vue-cli 脚手架生成的默认打包配置文件情况下运行 npm run build 打包后，即可开始项目部署

项目部署根据公司要求不同大致分为一下俩种部署方式：

1、服务器放置打包后生成的dist文件夹

此种部署方式，需要将config.js文件下index.js中的assersPublishPath，改为‘./’，

2、项目部署后发现图片路径不对，在浏览器器中仔细分析加载的图片路径

分析：
正常路径应为http://localhost:3333/resume/dist/static/img/music2.3278dbf.png
但是引用路径http://localhost:3333/resume/dist/static/css/static/img/music2.3278dbf.png，

对比一下发现多了两层，/static/css, 看来跟css 有一定关系~，这时候我们去看看css里面的引入路径
原来是css中的引入为static/img/***.jpg，但是css文件相对于index的相对路径为 /static/css,
解决办法：在build下utils.js中新增一下黑框括起来的代码即可

1
2
3
4
5
6
7
8
9
10

if (options.extract) {
    return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    //线上环境打包资源问题
    publicPath: '../../'  //（解释：pubicpath为打包后app.css至index.html的相对路径）
    })
} else {
    return ['vue-style-loader'].concat(loaders)
}