Vue 项目部署到centos7服务器后,静态资源路由加载问题

Vue 项目部署到centos7服务器后,静态资源路由加载问题,第1张

在dist目录下的static静态资源,通过路由访问时,会多出一个路由在静态资源前面,如:

ip:8080/Test/static/one.js

Test路由的存在导致 one.js报404问题;

项目在构建dist时,路由配置的问题,找到Vue项目下

/src/router/index.js文件,

更改为如图方式:

重新 npm run build,将dist替换到服务器上,重新构建docker镜像及启动容器即可

首先,vue项目有两个地方可以存放静态资源。一个是assets文件夹,一个是static文件夹(地址栏输入static可以直接访问)。放到static里面webpack打包后只会把资源复制到发布目录而不会把小图片优化为base64。而assets内的资源会被webpack打包,比如图片,会被转为BASE64。为了兼顾图片资源优化,所以还是不适合把图片资源放到static。

而当我们把这些资源放入assets文件夹时,当引入的图片是背景图片时,会报错。

这个时候,还需配置 build =>util.js 里找到 ExtractTextPlugin.extract 增加一行: publicPath: '../../' ,主要解决背景图片路径的问题。

这样改动的原因是Vue打包完成的目录结构中,js/css文件与static目录的层级差了2级


欢迎分享,转载请注明来源:夏雨云

原文地址:https://www.xiayuyun.com/zonghe/589047.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-07-07
下一篇2023-07-07

发表评论

登录后才能评论

评论列表(0条)

    保存