vue3+ts+vite打包后静态资源404无法加载js和css问题解决办法
更新时间：2024年04月29日 11:42:39 作者：小圳圳
这篇文章主要给大家介绍了关于vue3+ts+vite打包后静态资源404无法加载js和css问题的解决办法,文中通过代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
vite 打包生成的文件如果直接放在服务器中是可以正常访问的，但是本地直接访问打包生成index.html文件就会提示以下问题。
访问的文件不存在，主要是因为路径配置问题。
提示跨域问题，不支持files协议，主要是因为esModule问题。
问题1：访问的文件不存在，主要是因为路径配置问题。
解决：在 vite.config.js文件中配置
主要：打包静态文件必须是根路径，否则放到服务器找不到静态资源（同理于webpack中的publicPath 的配置）
解决方法：
在vite.config.ts中设置：base: "./"具体代码如下
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
base: "./", //等同于 assetsPublicPath :'./'
plugins: [vue()],
// 设置文件./src路径为 @
resolve: {
// 设置文件./src路径为 @
alias: [
{
find: '@',
replacement: resolve(__dirname, './src')
}
],
dedupe: [
'vue'
]
},
})
再次打包问题解决——
总结
到此这篇关于vue3+ts+vite打包后静态资源404无法加载js和css问题解决办法的文章就介绍到这了,更多相关vue3+ts+vite打包静态资源404内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了Vue中从template到jsx语法教程示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
Vue3在新版本中提供了一个新的API，称为Suspense，它可以使异步组件的加载更加高效和流畅，在本文中，我们将详细了解 Vue3 Suspense 处理异步组件加载的工作原理以及如何使用它来提高 Web 应用程序的性能2023-06-06
解决ant Design中Select设置initialValue时的大坑
这篇文章主要介绍了解决ant Design中Select设置initialValue时的大坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
本文深入分析了副作用的实现以及执行时机，并详细分析了用于存储副作用函数的targetMap的数据结构及其实现原理，还深入分析了依赖收集track函数以及派发更新 trigger 函数的实现,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue实现自定义下拉菜单功能,文章先通过实例代码给大家介绍，后面对用到的知识点总结，需要的朋友可以参考下2018-07-07
为什么vue等的这些mvvm框架比传统的操作dom渲染页面要快,下面这篇文章主要给大家介绍了关于虚拟DOM与diff算法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了TinyMCE富文本编辑器在Vue中的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
这篇文章主要为大家详细介绍了Vue组件化学习之scoped，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要为大家详细介绍了V-model实现数据双向绑定的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-12-12
今天小编就为大家分享一篇使用electron将vue-cli项目打包成exe的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论