开发环境

Vite需要Node.js版本> = 12.0.0

检测node版本命令

node -v

正式开始创建

npm init @vitejs/app 项目名称
or
yarn create @vitejs/app 项目名称

安装时会让你选择 直接选择vue即可 之后用vscode打开即可

项目结构可以说是十分的简洁，先把依赖装上

npm install
or
yarn

运行命令

npm run dev
or
yarn dev

一个简单的vue3.0+vite的项目就搭建成功了

vite.config.js基本配置

Vite 2.0 core 现在与框架无关。现在通过@vitejs/plugin-vue这个插件来支持Vue

npm i @vitejs/plugin-vue
or
yarn add @vitejs/plugin-vue

然后在vite.config.js中导入这3个依赖

import {
          
    defineConfig } from "vite";  // 帮手函数，这样不用 jsdoc 注解也可以获取类型提示
import {
          
    resolve } from "path"; // 主要用于alias文件路径别名
import vue from @vitejs/plugin-vue;

然后基于resolve写个小方法，方便以后新增别名使用(非必要)

function pathResolve(dir) {
          
   
  return resolve(__dirname, ".", dir);
}

接下来进入重要环节

export default defineConfig({
          
   
      plugins:[vue()], // 配置需要使用的插件列表，这里将vue添加进去
      // 配置文件别名 vite1.0是/@/  2.0改为/@
      // 这里是将src目录配置别名为 /@ 方便在项目中导入src目录下的文件
      resolve: {
          
   
          alias: {
          
   
            "/@": pathResolve("src"),
          }
      },
      // 强制预构建插件包
      optimizeDeps: {
          
   
          include: [axios],
      },
      // 打包配置
      build: {
          
   
          target: modules,
          outDir: dist, //指定输出路径
          assetsDir: assets, // 指定生成静态资源的存放路径
          minify: terser // 混淆器，terser构建后文件体积更小
      },
      // 本地运行配置，及反向代理配置
      server: {
          
   
          cors: true, // 默认启用并允许任何源
          open: true, // 在服务器启动时自动在浏览器中打开应用程序
          //反向代理配置，注意rewrite写法，开始没看文档在这里踩了坑
          proxy: {
          
   
              /api: {
          
   
                  target: http://192.168.99.223:3000,   //代理接口
                  changeOrigin: true,
                  rewrite: (path) => path.replace(/^/api/, )
            }
          }
      }
})

以上就是vite.config.js文件的基本配置，需要更多配置的可以参考文档进行配置

下面附上我自己的完整代码

import {
          
    defineConfig } from "vite";
import {
          
    resolve } from "path";
import vue from @vitejs/plugin-vue;
function pathResolve(dir) {
          
   
  return resolve(__dirname, ".", dir);
}

export default defineConfig({
          
   
    base: "",
    plugins:[vue()],
    resolve: {
          
   
        alias: {
          
   
          "/@": pathResolve("src"),
        }
    },
    optimizeDeps: {
          
   
        include: [axios],
    },
    build: {
          
   
      target: modules,
      outDir: dist,
      assetsDir: assets,
      minify: terser // 混淆器
    },
    server: {
          
   
        cors: true,
        open: true,
        proxy: {
          
   
          /api: {
          
   
              target: http://192.168.99.223:3000,   //代理接口
              changeOrigin: true,
              rewrite: (path) => path.replace(/^/api/, )
          }
        }
    }
});