简体   繁体   English

vite@2 构建中缺少组件和资产

[英]Missing components and assets in vite@2 build

I was being able to do a functional build with vite@1 and now that I have updated my configuration and my modules to work with vite@2, some assets and components do not load correctly and have paths that do not correspond to the real absolute paths.我能够使用 vite@1 进行功能构建,现在我已经更新了我的配置和模块以使用 vite@2,一些资产和组件无法正确加载并且路径与真正的绝对路径不对应路径。

It works perfect on dev and although I am making an app with electron, it should not be a problem since as I mentioned before the builds were good with vite@1.它在 dev 上运行完美,虽然我正在使用 electron 制作应用程序,但这应该不是问题,因为正如我之前提到的那样,vite@1 的构建很好。

It is not a problem with the assets, they exist in the build folder.资产不是问题,它们存在于构建文件夹中。 Seems to be a problem when they are required.在需要它们时似乎是一个问题。

This is a more detailed issue where you can find all the error messages and screenshots:这是一个更详细的问题,您可以在其中找到所有错误消息和屏幕截图:

https://github.com/MangoTsing/vite-electron-quick/issues/11 https://github.com/MangoTsing/vite-electron-quick/issues/11

Although I don't think it has to do with electron, again.虽然我不认为它与 electron 再次有关。 Still I put it on vite-electron-quick to rule out the possibility.我仍然把它放在 vite-electron-quick 上以排除这种可能性。

This is my vite config :这是我的 vite 配置

import { join } from 'path'
import { UserConfig } from 'vite'
import dotenv from 'dotenv'
import vue from '@vitejs/plugin-vue'

dotenv.config({ path: join(__dirname, '.env') })
const root = join(__dirname, 'src/render')

const config: UserConfig = {
  root,
  resolve: {
    alias: {
      '/@/': root,
    }
  },
  base: './',
  build: {
    outDir: join('../../dist/render'),
    emptyOutDir: true,
    assetsInlineLimit: 0
  },
  server: {
    port: +process.env.PORT,
  },
  plugins: [
    vue()
  ],
  optimizeDeps: {
    exclude: [
      'electron-is-dev',
      'electron-store',
    ]
  },
}

export default config

Reproduction再生产

https://github.com/denyncrawford/mismor-guillotine https://github.com/denyncrawford/mismor-guillotine

System Info系统信息

  • vite latest: vite
  • Operating System: Windows 10 2004操作系统:Windows 10 2004
  • Node version: 15.2.0节点版本:15.2.0
  • Package manager (npm) and version: 7.0.8 Package 管理器(npm)和版本:7.0.8

Solved!解决了! This was happening because vue-router's createWebHistory() can't hanlde the navigation if the app is not being served.发生这种情况是因为如果未提供应用程序,vue-router 的createWebHistory()无法处理导航。 It works on dev mode because vite serves the app but when you build and open the file in a browser it doesn't.它在开发模式下工作,因为 vite 为应用程序提供服务,但是当您在浏览器中构建和打开文件时,它不会。 So you may say: It is pretty basic , well no... The actual problem was being caused because by the drastical change that vite had at vite@2 and the way the starter-code-templates had to adapt to it.所以你可能会说:这是非常基本的,好吧不......实际的问题是由于 vite 在 vite@2 的巨大变化以及 starter-code-templates 必须适应它的方式引起的。 I was using vite with electron, so migrating the starter I'm using was kinda a blinded run.我将 vite 与 electron 一起使用,因此迁移我正在使用的启动器有点盲目运行。 I found that the starter is not serving the file anymore but loading the file directly on the electron main.js , so because I don't know why this is for, I did not serve the file again, instead changed to createWebHashHistory() at my router config and then it worked!我发现启动器不再提供文件,而是直接在main.js上加载文件,所以因为我不知道这是为什么,我没有再次提供文件,而是改为createWebHashHistory() at我的路由器配置,然后它工作!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM