Vue项目部署资源路径问题

本文主要解决两个问题：

1、vue-cli发布时 js，css文件路径错误

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

问题:

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

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

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

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

生成的文件目录如下：

入口html文件index.html的css，js引入都是从项目的根目录下开始。

生生的index.html，所有js，css为直接从根目录下引用

css中的图片资源引用都为：

也是直接从跟目录下的static文件读取，在此之后，再次打开你的地址，哇，没有一片红了~

2、服务器放置整个项目，这样的情况一般用于github首页使用vue项目时

（小技巧：以这种方式部署的时候，无法发布线上去看，只需要打包后看dist下的index.html能否正常运行即可~）

 依旧按照上面的配置进行打包，发布之后，发现一片大红~

js，css阿西吧，怎们全部没找到？

这就对了，因为此时的 ‘/’ 根路径是整个项目的根路径，在看看此时的项目结构：

这个红圈圈static是用来放置三方类库，黑色圈圈的static才是真正打包后生成的js，cs，img等资源的位置，所以~错误原因找到了~

分析：路径不对，config.js文件下index.js中的assersPublishPath，改为‘./’，当前文件夹下的static即可。

修改打包后再去看看此时的js，css引用路径

    

简直完美~，js，css都已经正常引入了，当你兴高采烈的打开网页的时候。。。。。。。。怎么还有报错。。。

图片路径什么鬼，又不对了。。。。。。

分析：

正常路径应为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,

恍然大悟~原来如此，但是怎么解决，脑壳儿疼。。。。

经过多方查阅资料，github查找终于找到了解决大办法：

那就是在build下utils.js中新增一下黑框括起来的代码即可

参考https://github.com/vuejs-templates/webpack/issues/166

（解释：pubicpath为打包后app.css至index.html的相对路径）

打包后，此时再打开你的网页~感动的稀里哗啦~~~终于正常了，可以访问了！