首页 > 其他分享 >vite+vue3 打包后页面空白现象

vite+vue3 打包后页面空白现象

时间:2023-12-27 14:13:04浏览次数:29  
标签:0.0 空白 html vite vue3 打包 页面

使用vite打包之后运行index.html空白,打开控制台发现报错:

解决方法:

  在vite.config中加入:

 publicPath: './',

  这是vite.config中的结构:

 
export default defineConfig({
  publicPath: './',
  lintOnSave: false,
  transpileDependencies: true,
  plugins: [
    vue(),
  ],
  server: {
    host: '0.0.0.0'
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

 打包之后的html

  
<script type="module" crossorigin src="./assets/xxx.js"></script>
<link rel="stylesheet" crossorigin href="./assets/xxx.css">

  

 

 

标签:0.0,空白,html,vite,vue3,打包,页面
From: https://www.cnblogs.com/liaozhongxing/p/17930429.html

相关文章

  • vue3横向时间轴展示
    架子是用的vue3+elementPlus,要用到时间轴展示,但element组件只有竖着的,想要横着的,找了一圈没有合适的,终于找到个合适的,文章原址https://blog.csdn.net/m0_62949703/article/details/127800712数据结构: {date:'2023-09-27’,isShow:true,children:[......
  • React 页面崩溃问题
    今天遇到一个页面崩溃问题,很神奇的是初始化打开的时候会崩溃,但是切到其他内容,再切回来又好了因为React是prod的版本,所以报错其实没卵用,最后定位到这个代码上:尝试了下,一个组件,returnnull或者returnfalse都是work的,但是returnundefined就不行了,而上图中前者可能会......
  • WebView中的页面调试方法
    在iOS12中,苹果正式弃用UIWebView,改成WKWebView,参考官方声明。后者在性能、稳定性、功能方面有很大提升,并且与Safari具有相同的JavaScript引擎(JavaScriptCore)。从Android4.4开始,增加ChromiumWebView,用来取代AndroidWebKitWebView。从Android......
  • 如何从Word中的整个文档中选择页面范围?
    转自:如何从Word中的整个文档中选择页面范围?如果要在Word文档中选择任何页面范围,可以用几种方法完成它?现在,我介绍一些技巧,供您选择MicrosoftWord中的页面范围。按住Shift键并在Word中选择页面范围使用VBA选择页面范围选择一系列页面KutoolsforWord 按住Shift键并在Word......
  • Vue3+TS+Vite中 vConsole 插件的使用
    vConsole一个轻量、可拓展、针对手机网页的前端开发者调试面板。vConsole是框架无关的,可以在Vue、React或其他任何框架中使用。现在vConsole是微信小程序的官方调试工具。https://gitee.com/Tencent/vConsole/ 平时在web应用开发过程中,我们可以console.log去输出一些......
  • vue3 elementplus 表格表头过长 三个点显示
    vue3:constrenderHeaderMethods=({column})=>{returncreateVNode(resolveComponent('el-tooltip'),{effect:'dark',content:column.label,placement:'top'......
  • vue3学习之Pinia状态管理
    状态管理 src/views/Pinia.vue<scriptsetup>import{ref}from"vue";import{storeToRefs}from"pinia";import{useCounterStore}from"../stores/counter";import{useTodos}from"../stores/todos";//可......
  • nginx部署vue编译项目刷新页面404
    原因:nginx配置错误。因为vue打包输出的是单页网页应用,只有一个index.html入口,其他路径是由前端路由去跳转的,服务器目录下没有对应物理路径,所以就会报404。这样的nginx配置会出现该问题。location/{alias/home/vue/dist/;indexindex.html;}  解......
  • vue3学习之逻辑复用
    逻辑复用-组合式函数 src/views/ad/User.vue<scriptsetup>import{useMouse}from"../../js/mouse.js";import{useFetch}from"../../js/fetch.js";import{ref,computed}from"vue";//组合式函数const{x,y}=useMouse();/......
  • 基于Python-Windows环境的Excel页面截图并邮件正文发送
    截图模块#截图模块defget_snapshot():#定义变量#excel文件的绝对位置excel_file=r'E:\L.xlsx'#输出图片的绝对位置output_png_path=r'E:\L.png'#excel的sheet名称excel_tb='每日销售'#注意要装excel软件,否则会报错excel=win......