vue 自建的css文件打包后找不到

文章讲述了在Vue项目打包过程中,由于src文件夹会被重命名,导致外部引用的CSS和JS可能找不到。因此,建议将全局CSS和JS放置在与index.html同级的public文件夹下,使用/路径引用,以确保打包后资源能正确加载。

在vue打包的时候,src文件夹里的东西都会被打包重命名,所以如果在index.html里引用了位于src里的文件,比如css或js就会找不到,如下:

打包以后,没有src文件夹,assets也没有这几个css:

所以不要把全局css或js放在src里,要放在和index.html同一目录下的public里,public里的一切都会保留,可以建个文件夹,比如static,也可以不建,如下:



这样打包以后,static文件夹和里面的css文件都会保留:


另外要注意:index.html里,href要写成 /,不要写成 ./
如: href="/static/reset.css"

https://www.codenong.com/cs109675906/

Vue3 项目中,打包后出现 JSCSS 文件 404 的问题通常与路径配置、服务器部署方式或代理设置有关。以下是一些常见原因及对应的解决方案: ### 路径配置问题 如果部署到服务器的非根目录,`index.html` 中资源引用可能为 `/assets/` 开头,这会导致浏览器无法正确加载静态资源。可以通过修改 `vite.config.js` 或 `vue.config.js` 中的 `base` 配置项来解决此问题。例如,将 `base` 设置为相对路径 `./`: ```javascript export default defineConfig({ base: './', }) ``` 这样可以确保打包后的资源使用相对路径进行引用,适用于部署在子路径中的情况[^1]。 ### CSS 路径错乱问题 在某些构建环境下,CSS 文件中的背景图或其他资源路径可能会出现问题。这是因为打包工具对路径进行了错误解析。可以在 `vue.config.js` 中调整 `css.loaderOptions` 来指定正确的路径处理规则: ```javascript module.exports = { css: { loaderOptions: { sass: { prependData: `@import "@/styles/_variables.scss";` } } } } ``` 此外,还可以通过修改 `build/utils.js` 文件中的提取 CSS 配置,确保路径被正确处理[^2]。 ### 反向代理和 History 模式问题 如果项目使用了 Vue Router 的 `history` 模式,并且配置了反向代理,那么在部署后可能会遇到白屏以及 JS/CSS 文件 404 的问题。这是由于前端打包不包含代理配置,需要后端服务器(如 Nginx)来处理代理请求。在 Nginx 配置文件中添加如下内容: ```nginx server { listen 80; server_name your_domain; location / { root /path/to/your/dist; index index.html; try_files $uri $uri/ =404; } location ^~/api/ { proxy_pass http://backend_server; } } ``` 上述配置确保了所有请求都会先尝试访问静态文件,若不存在则返回 `index.html`,这对于支持 Vue Router 的 `history` 模式至关重要[^3]。 ### 跨域与接口调用问题 当本地开发时使用了代理配置,在打包部署后这些代理不会生效,因此调用非同源接口会报 404 错误。应通过后端服务或者 Nginx 设置代理以解决跨域问题。具体做法是在 Nginx 中创建一个新的 `server` 块并配置相应的 `proxy_pass` 规则[^4]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值