使用npm init @vitejs/app 搭建vue3期间遇到的问题汇总整理

原创已于 2022-05-08 13:44:33 修改 · 4.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-04-24 11:39:16 首次发布

本文总结了使用npm init @vitejs/app搭建Vue3项目时遇到的问题，包括npm下载配置问题、Vetur插件禁用、全局引入Element-Plus Icon报错、Vue3找不到模块"path"的错误以及如何解决这些问题。

最近看到用vite2能大幅缩短打包时间以及项目启动时间，就自己试了一下用vite2搭建项目，下面是我遇到的问题集合

1、若是npm下载某个配置有问题，参照下面配置，可以试试

npm config edit  -- 查看npm镜像配置路径，以及其他的配置镜像下载路径

electron_mirror=https://npm.taobao.org/mirrors/electron/  -- electron下载镜像地址
registry=https://registry.npm.taobao.org/  --npm 的镜像地址
// npm install时报错gyp ERR! stack Error: Can't find Python executable "2.7"，不安装Python的解决方法
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/  -- node-sass 下载地址
strict-ssl=false -- 设置忽略签名验证的

2、禁用vetur插件，前提是你用的是ts

如果不禁用会引起的报错，但是不影响正常使用，所以强迫症患者禁用，不在意的可以不用管

如下

安装

这个插件

3、绑定元素错误提示问题：

解决：json文件添加如下：

3、全局引入element-plus icon 报错

引起原因：参数是 string 类型，不能用作对象 a 的索引。把 a 设置为 any 类型可以解决

解决办法：

Sass @mixin 与 @include

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。

@include 指令可以将混入（mixin）引入到文档中。

当我们使用@include页面报错

如下，说明是未检测到vue类型

需要我们

4、vue3中提示找不到模块 “path“ 或其相对应的类型声明

对node进行类型声明
yarn add @types/node -D
npm i @types/node --D

5、模块 ""path"" 只能在使用 "allowSyntheticDefaultImports" 标志时进行默认导入

解决方式：