使用 vite 创建 vue3 项目

2022 年 3 月 24 日
本文字数：907 字
阅读完需：约 3 分钟

前言

创建项目前，我们来简单了解下 Vite 这个构建工具。其实在一开始的时候，内心是有点拒绝，毕竟现在市面上有太多的构建工具了，如grunt，gulp,webpack等，实在是累觉不爱了，但是后来闲的时候还是试了一下，嘿嘿，是真香。

介绍及使用

Vite 这个工具是尤大神开发的一个基于原生 ES-Module 的前端构建工具，启动很快，而且很容易上手。

Vite特点:

快速的冷启动
即时的模块热更新,热更新的速度不会随着模块的增多而变慢
真正的按需求编

当然就目前来说 Vite 仅支持 Vue3.x,之前的版本就不能和Vite一起使用了。

我们先创建一个项目尝试一下，打开终端，输入

yarn create @vitejs/app my-vue-app, 选择vue， vue-ts,回车

进入项目，安装依赖，启动

cd my-vue-app
yarn or npm i
yarn dev or npm run dev

复制代码

因为这里使用了Typescript,我们还需要安装下Node的声明文件

启动没有问题了，但是打开终端我们发现一个问题

在这种情况下，我们是无法在局域网中通过 ip 访问调试的，所以还是配置一下vite.config.js,

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",  },});

复制代码

不用重启，保存，打开终端，可以看到已经 OK 了

当然我们在这里可以顺便把 @ 路径也配置了，打开 vite.config.js文件，如下配置

import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import { resolve } from 'path';
export default defineConfig({  plugins: [vue()],   resolve: {      alias: [        {          find: /\/#\//,          replacement: resolve(process.cwd(), '.', 'types') + '/',        },        {          find: '@',           replacement: resolve(process.cwd(), '.', 'src') + '/',        },      ],      dedupe: ['vue'],    },  server: {    host: "0.0.0.0",  },});