Vite构建Vue项目失败求助：模板解析错误及配置问题

问题详情 #

首次构建部署Vite Vue应用时失败，控制台提示App.vue中Transition标签存在解析错误，错误指向Transition闭合标签位置。

控制台错误日志 #

> vue_weather@0.0.0 build
> vite build

vite v4.2.0 building for production...
✓ 1 modules transformed.
✓ built in 51ms
[vite:build-import-analysis] Parse error @:7:20
file: D:/w/src/App.vue:7:19
5:       <Transition name="page" mode="out-in">
6:         <component :is="Component" />
7:       </Transition>
                      ^
8:     </RouterView>
9:   </div>
error during build:
Error: Parse error @:7:20
    at parse$e (file:///D:/w/node_modules/vite/dist/node/chunks/dep-c167897e.js:16018:355)        
    at Object.transform (file:///D:/w/node_modules/vite/dist/node/chunks/dep-c167897e.js:45406:27)

相关代码 #

App.vue #

<template>
  <div class="flex flex-col min-h-screen font-Roboto bg-weather-primary">
    <SiteNavigation />
    <RouterView v-slot="{ Component }">
      <Transition name="page" mode="out-in">
        <component :is="Component" />
      </Transition>
    </RouterView>
  </div>
</template>

<script setup>
import { RouterView } from "vue-router";
import SiteNavigation from "./components/SiteNavigation.vue";
</script>

package.json #

{
  "name": "vue_weather",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.3.4",
    "tailwind-scrollbar": "^3.0.0",
    "uid": "^2.0.1",
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.7",
    "vite": "^4.1.4"
  }
}

原vite.config.js #

const path = require('path')
const { defineConfig } = require('vite')

module.exports = defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/main.js'),
      name: 'MyLib',
      fileName: (format) => `my-lib.${format}.js`
    },
    rollupOptions: {
      // make sure to externalize deps that shouldn't be bundled
      // into your library
      external: ['vue'],
      output: {
        // Provide global variables to use in the UMD build
        // for externalized deps
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

解决方案 #

问题根源在于vite.config.js配置了库模式（library mode），但当前是普通Vue应用，并非要打包成可复用的库。库模式会改变Vite的构建逻辑，导致Vue模板解析异常。

修改vite.config.js为普通应用配置 #

替换原配置为以下内容（基础配置，可根据需求添加别名等扩展）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

后续操作 #

1. 删除项目根目录下的node_modules文件夹和package-lock.json（或yarn.lock）
2. 重新安装依赖：npm install
3. 执行构建命令：npm run build

额外检查 #

Vue3内置的<Transition>组件无需手动导入即可直接使用，你的App.vue代码逻辑无问题；package.json中的依赖版本也符合Vue3+Vite的构建要求。

内容的提问来源于stack exchange，提问作者Ballazx