Vite 初始化 Vue3 项目问题记录

记录初始化项目遇到的问题

1.脚手架初始化

perl 复制代码
npm create vite@latest my-vue-app

选择 Vue 框架

选择 TypeScript 开发语言

进入项目目录,初始化

arduino 复制代码
cd my-vue-app
npm i
npm run dev

项目初始化运行成功

2.问题记录

2.1 TypeScript 找不到模块

Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

这个错误是由于无法找到名为'vue'的模块,由于vue3 库入口文件通过 commonjs 规范导出。解决这个问题的方法有两种:

1.将tsconfig.json文件中的"moduleResolution"选项从"bundler"改为"node"。这样可以告诉TypeScript编译器在解析模块时使用Node.js的模块解析策略。

修改tsconfig.json文件中的"moduleResolution"选项

json 复制代码
{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}

2.在项目的路径配置中添加别名。可以通过在tsconfig.json文件中的"paths"选项中添加别名来解决这个问题。例如,将别名'vue'映射到正确的模块路径(不建议引入无法做类型推断)。

在tsconfig.json文件中的"paths"选项中添加别名

json 复制代码
{
    "compilerOptions": {
        "paths": {
            "vue": ["node_modules/vue/dist/vue.esm-bundler.js"]
         }
    }
}

2.2 Unknown compiler option 'allowImportingTsExtensions'

新版本TS已去掉该配置选项,删除该选项 allowImportingTsExtensions

2.3 vite.config.ts Cannot find module 'vite'.

将tsconfig.node.json文件中的"moduleResolution"选项从"bundler"改为"node"。这样可以告诉TypeScript编译器在解析模块时使用Node.js的模块解析策略。

3.JSX & TSX 支持

安装 jsx 插件,并引入配置

css 复制代码
npm i @vitejs/plugin-vue-jsx
ts 复制代码
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
  plugins: [
    vue(),
    vueJsx()
  ],
})

4. 为打包后的文件提供传统浏览器兼容性支持

安装 legacy 插件,并配置

css 复制代码
npm i @vitejs/plugin-legacy
ts 复制代码
import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
    legacy({
      targets: ['chrome 52'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true,
      polyfills: [
        'es.symbol',
        'es.array.filter',
        'es.promise',
        'es.promise.finally',
        'es/map',
        'es/set',
        'es.array.for-each',
        'es.object.define-properties',
        'es.object.define-property',
        'es.object.get-own-property-descriptor',
        'es.object.get-own-property-descriptors',
        'es.object.keys',
        'es.object.to-string',
        'web.dom-collections.for-each',
        'esnext.global-this',
        'esnext.string.match-all'
      ]
    }),
  ],
})
相关推荐
菜鸟una1 分钟前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)
前端·vue.js·微信小程序·小程序·typescript·taro·1024程序员节
Yeats_Liao4 分钟前
Go Web 编程快速入门 05 - 表单处理:urlencoded 与 multipart
前端·golang·iphone
飞翔的佩奇8 分钟前
【完整源码+数据集+部署教程】【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球场地区域图像分割系统
拉不动的猪9 分钟前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试
桃子不吃李子20 分钟前
nextTick的使用
前端·javascript·vue.js
萌新小码农‍41 分钟前
SpringBoot+alibaba的easyexcel实现前端使用excel表格批量插入
前端·spring boot·excel
冰暮流星1 小时前
css3新增背景图片样式
前端·css·css3
书唐瑞2 小时前
谷歌浏览器和火狐浏览器对HTML的嗅探(Sniff)能力
前端·html
rocky1912 小时前
谷歌浏览器插件 使用 playwright 回放用户动作键盘按键特殊处理方案
前端
rocky1912 小时前
playwright里兼容处理回放无界微前端内iframe内部元素事件和不在无界微前端内的iframe元素
前端