使用vite创建vite3 项目以及遇到的一些问题

Vite是一种新型前端构建工具，能够显著提升前端开发体验。

------------------------开发------------------------------

1、快速创建vue3+ts的项目

npm init vite@latest vue3-project-demo --template vue-ts

2、引入sass

npm add -D sass

3、设置环境变量

1、创建.env环境变量文件，见vite文档
2、在环境变量文件中定义的变量，可以在 env.d.ts 增加智能提示

/// <reference types="vite/client" />
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string
  // 更多环境变量...
}
interface ImportMeta {
  readonly env: ImportMetaEnv
}

3、设置多环境运行：

  "scripts": {
    "dev": "vite serve --mode development",
    "test": "vite serve --mode uat",
    "build:dev": "vite build --mode development",
    "build:test": "vite build --mode uat",
    "build:prod": "vite build --mode production",
    ...
}

------------------------问题------------------------------

1、项目创建成功后，使用命令npm run dev看到终端显示，Network没有显示局域网ip

  vite v2.9.13 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 291ms.

根据网上查询的资料，有以下几种解决方法：

• 通过修改vite.config.ts 方法解决

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0'        // 添加server，设置host
  }
})

• 通过Vite CLI配置
  执行 npx vite --host 0.0.0.0命令后，就可以通过局域网ip访问了
• 修改npm脚本
  在根目录下package.json 文件中修改scriptes节点下的脚本：

  "scripts": {
    "dev": "vite --host 0.0.0.0",        // 在此添加host
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  ....
  ....
}

修改上面任何一种配置，可解决network 为空的问题。

2、项目中引入组件HelloWorld有一个红色波浪号提示

截屏2022-07-05 下午5.33.01.png

造成的原因：

因为vue3不支持vutur

解决方案：

方案1：在vscode 中搜索vetur插件，禁用之后，重启就可以。

截屏2022-07-05 下午5.44.09.png

方案2：在根目录 env.d.ts中，添加如下代码也可以解决

declare module "*.vue" {
  import { App, defineComponent } from "vue";
  const component: ReturnType<typeof defineComponent> & {
    install(app: App): void;
  };
  export default component;
}

3、element-plus 按需导入后，使用elmessage、elloading提示红色下划线。

1673574701383.png

解决方案：

在根目录新建一个 element-plus.d.ts 文件，保证后缀名是.d.ts就可以了

export {}
declare global {
  const ElMessage:typeof import('element-plus')['ElMessage'] 
  const ElLoading:typeof import('element-plus')['ElLoading'] 
}

在tsconfig.js 中引入element-plus.d.ts

"include": ["element-plus.d.ts"],

4、vue3 运行报错：Uncaught ReferenceError: globalThis is not defined

原因：

globalThis旨在通过定义一个标准的全局属性来整合日益分散的访问全局对象的方法。该提案目前处于第四阶段，这意味着它已经准备好被纳入ES2020标准。所有流行的浏览器，包括Chrome 71+、Firefox 65+和Safari 12.1+，都已经支持这项功能。你也可以在Node.js 12+中使用它。

解决方案：

方案1：
可以通过升级node版本和浏览器版本解决，node> 12，chrome版本>71。

方案2：
在index.html中

<script>
  this.globalThis || (this.globalThis = this);
</script>

5、引入router 报错：变量“routes”在某些无法确定其类型的位置处隐式具有类型“any[]”。

解决方案：

引入RouteRecordRaw，充当路由数据类型，ts中数据类型是Array<T>，T就是数据类型。

import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'

const routes:Array<RouteRecordRaw> = [
   {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/layout/baselayout.vue')
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login/index.vue')
  },
  {
    path: '/:path(.*)',
    name: '404',
    component: () => import('@/views/notFound/index.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

6、引入element-plus

执行命令：

npm add element-plus

如果添加命令报错：
ERROR TypeError: Cannot read properties of undefined (reading 'replace')
表明element-plus没有删除干净
执行命令：

npm uninstall element-plus

在main.ts中删除应用element-plus的代码

7、按需引入element-plus 组件

按需引入element-plus
参考官方文档

npm install -D unplugin-vue-components unplugin-auto-import

Vite

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

引入图标库

npm install @element-plus/icons-vue

main.ts

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}