您现在的位置是:首页 >其他 >vite的使用网站首页其他

vite的使用

许小墨~ 2024-06-30 00:01:02
简介vite的使用

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图!

系列文章目录

前端系列文章——传送门
后端系列文章——传送门



vite

由尤雨溪团队开发的打包工具,类似于webpack,专属于vue使用,目的在于替换掉webpack。

对比webpack:

webpack打包如下图:

在这里插入图片描述

vite打包如下图:
在这里插入图片描述

从上面两张图可以看出,为什么webpack打包的vue项目会很慢 ,而vite具备了更加优秀的用户体验感。

vite的实现原理是利用ES6的import会发送请求去加载文件的特性,拦截这些请求,做一些预编译,省去webpack冗长的打包时间。

创建项目命令:

npm create vite@latest my-vue-app -- --template vue

第一次使用会提示,是否安装creat-vite,敲回车确定,这是vite的创建工具。

接下来vite会提示,让我们选择安装什么框架,然后再选择是否安装ts。

然后项目就安装好了。

启动命令:

"scripts": {
    "dev": "vite --open --port 8888",
    "build": "vite build",
    "preview": "vite preview --open"
}

preview是启动打包好的项目。

注意:这样安装的项目,没有vue-router,没有vuex,一切都需要自己手动配置。

选择创建配置好的项目:

npm init vue

默认我们在vue项目中无法使用@作为src的路径,需要配置,在vite.config.js中:

import {resolve} from 'path'
在 ts 模块中加载 node 核心模块,需要安装 node 的类型补充模块:npm i @types/node
// 配置
export default defineConfig({
  plugins: [vue()],
    resolve: {
        alias: {
            '@': resolve(__dirname, 'src')
        }
    }
})

服务器配置:

export default defineConfig({
  server: {
      open: true,
      port: 端口号,
      proxy: {
          '/api': {
            target: 'http://jsonplaceholder.typicode.com',
            changeOrigin: true,
            rewrite: (path) => path.replace(/^/api/, ''),
          },
          '/foo': 'http://localhost:4567',
          
      }
  }
})

本博文缺失大量图片,严重影响内容完整性以及阅读体验,完整内容请前往本人菜鸡博客——许小墨のBlog

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。