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的相对路径)



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

猜你喜欢

转载自blog.csdn.net/qq_39480597/article/details/79568173