《vite构建vue3》

一、解决方案

Vite 是一个现代的前端构建工具，它能够极大地提升 Vue3 项目的开发体验。使用 Vite 构建 Vue3 可以实现快速启动开发服务器、热更新等功能，并且在生产构建时也有高效的打包性能。

二、创建项目并安装依赖

确保已经安装了 Node.js 环境。然后通过命令行来创建项目：

bash
npm init vite@latest my - vue3 - project --template vue


这会创建一个名为 my-vue3-project 的文件夹，里面包含了一个基本的 Vue3 项目结构。进入项目文件夹：

bash
cd my-vue3-project


安装依赖：

bash
npm install


三、开发模式下的配置与运行

1. 启动开发服务器

运行以下命令启动开发服务器：

bash
npm run dev


此时会自动打开浏览器访问默认地址（如 http://localhost:3000），并且实现了热更新功能，当修改代码时页面会自动刷新相应的内容。

如果想要自定义端口号或者主机名等，在项目根目录下创建 vite.config.js 文件，例如：

js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'</p>

<p>export default defineConfig({
  server: {
    host: '0.0.0.0', // 允许外部设备访问
    port: 8080, // 自定义端口号
  },
  plugins: [vue()],
})

2. 使用TypeScript

如果你想要使用 TypeScript，可以在创建项目时选择带有 TypeScript 模板的选项。也可以在已有的项目中进行配置。先安装类型声明文件：

bash
npm install @types/node -D


然后在 src 目录下创建 shims - vue.d.ts 文件，内容如下：

ts
declare module '*.vue' {
import { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}


这样就可以在项目中使用 TypeScript 语法编写 Vue 组件了。

四、生产构建

当项目开发完成需要部署时，可以使用以下命令进行生产构建：

bash
npm run build


Vite 会将项目打包到 dist 文件夹中，默认会去除开发环境中的代码，优化资源引用等操作，从而生成适合上线的静态资源文件。