小谢第29问:Vue项目打包部署到服务器上,调接口就报js,css 文件404
1、publicPath路径的问题,先看下build之后的包确认下是不是publicPath路径配置的原因,有没有static这个文件夹,以及这个文件夹下边有没有这些404的js和css
2、history模式需要配置nginx支持
3、在dev环境下测试没有问题,但是npm run build后图片的路径找不到,对于图片路径的设置,只可以有以下三种方式
1,vue里的img访问的路径是一个固定的字符串,这种采用相对路径../../xxx/../static 找到static的图片路径
<img src="../../../static/images/i-logo.png" alt="">
2,,vue里的img访问的路径是一个从网络获取的字符串,这种不会经过webpack的url-loader处理的应采用当前路径./static 找到static的图片路径
{"name": "视图库", "icon": "./static/app-portal-baseui/images/i-app1.png", "id": "shituku","url": "http://172.16.64.211:8080/#/dashboardManage?token=111", "fields":[ {"name":"openMode","description":"tab"} ] },
3,scss的背景图片,这种是static/theme/light/index.scss相对与static的路径,所以直接写成 ../../../static即可,一定是三个 ../
background: url("../../../static/app-portal-baseui/images/tech-qh-bg.png") no-repeat;
对scss中的图片路径, 如果scss文件的层级较深,直接写路径编辑前会提示错误(运行其实不会报错),可以在common/var.scss中定义一个图片的变量,然后在scss使用变量即可
既然许愿了,就努力去实现