使用vite创建vue3项目

一颗Potato
1,238 阅读2分钟

「这是我参与2022首次更文挑战的第四天，活动详情查看：2022首次更文挑战

前言

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

13.jpeg

介绍及使用

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

Vite特点:

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

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

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

pnpm create my-vue-app, 选择vue， vue-ts,回车

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

cd my-vue-app

yarn or npm i

yarn dev or npm run dev

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

image.png

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

image.png

在这种情况下，我们是无法在局域网中通过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",
  },
});

配置完成后，我们可以测试下，打开App.vue文件，修改HelloWorld组件的路径，保存，可以看到代码运行正常，说明配置成功了。

Vite官网

Vite github

感谢阅读，欢迎点赞评论。

avatar
文章
阅读
粉丝