没用的小知识--vite项目打包后的代码如何本地运行查看

vite项目打包后如何本地运行查看

最近需要写一些小demo作为课程作业，但使用vite打包后，在本地是无法直接通过右键打开文件运行的。在查阅资料后，总结了一些方法

使用vite-plugin-singlefile插件

这种方法只适合于写一些小demo，然后向别人演示用，毕竟打包成一个单文件，不利于按需加载，初次加载需要加载全部文件。这里使用主要是因为，提交课堂作业时，老师没有相关的环境。为了方便查看效果，可以将项目打包为一个html文件，然后就可以直接打开了。

首先安装相关库

pnpm i vite-plugin-singlefile -D 或 

或

npm i vite-plugin-singlefile -D

接着配置vite.config.ts

import {  defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import { viteSingleFile } from 'vite-plugin-singlefile';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteSingleFile(),
  ],
  resolve: {
    alias: {
      "@": resolve("./src"),
    },
  },
});

这时，再运行下面命令。最后直接打开dist目录下index.html即可查看

pnpm build 或 npm run build

或

npm run build