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'
      ]
    }),
  ],
})
相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
画月的亮2 小时前
element-ui 使用过程中遇到的一些问题及解决方法
javascript·vue.js·ui
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
m0_526119402 小时前
点击el-dialog弹框跳到其他页面浏览器的滚动条消失了多了 el-popup-parent--hidden
javascript·vue.js·elementui
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
lyj1689975 小时前
el-tree选中数据重组成树
javascript·vue.js·elementui
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt