pnpm 的使用

pnpm create vite

下面是基于pnpm创建的一个裸项目；为啥叫裸项目是因为创建的项目除了Vite没有任何依赖

// 到指定路径下 执行 pnpm install pnpm run dev

新建src文件夹，将main.js迁移到src并修改index.html脚本引入路径 <script type="module" src="./src/main.js"></script>

现在引入vue相关依赖 pnpm i vue vite-plugin-vue2 element-ui vue-template-compiler sass

在src目录创建App.vue

<template>
  <div class="main-app">
    <h2>hello Vite</h2>
  </div>
</template>

<style lang="scss">
@import "src/assets/css/common.scss";

.main-app {
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
}
</style>

调整main.js

import Vue from "vue";
import App from "./App.vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.config.productionTip = false;
Vue.use(ElementUI);

Vue.prototype.$bus = new Vue({
  render: (h) => h(App),
}).$mount("#app");

根目录创建vite.config.js，使用到require-context需处理兼容。 pnpm i rollup-plugin-require-context generate-source-map

import { defineConfig, loadEnv } from "vite";
import { createVuePlugin } from "vite-plugin-vue2"; // 使用Vue2版本
import requireContext from "rollup-plugin-require-context"; // 处理兼容webpack工具require-context;
const path = require("path");

export default defineConfig(({ command, mode }) => {
  let config = {};
  const env = loadEnv(mode, process.cwd()); // 根据服务环境获取环境变量
  // 情景模式配置
  if (command === "serve") {
    // dev 独有配置
    config = {
      base: "/",
    };
  } else {
    // build 独有配置
    config = {
      base: env.VITE_APP_BASE, // 生产环境基础路径必须前后都带斜杠否则打包会出现警告提示
      build: {
        terserOptions: {
          // 打包编译清除控制台输出及debugger
          compress: {
            drop_console: true,
            drop_debugger: true,
          },
        },
        outDir: env.VITE_APP_DIR,
        assetsDir: env.VITE_APP_ASSETS,
        rollupOptions: {
          output: {
            entryFileNames: `${env.VITE_APP_ASSETS}/js/entry[hash].js`, // [name]-[hash] 入口文件
            chunkFileNames: `${env.VITE_APP_ASSETS}/js/chunk[hash].js`, // [name]-[hash] 共享文件
            assetFileNames: `${env.VITE_APP_ASSETS}/assets/[hash][extname]`, // [name]-[hash] 静态资源
          },
        },
        brotliSize: false, // 计算打包时间关闭，不进行该环节；提升bundle效率
      },
    };
  }
  return {
    ...config, // 合并开发生产环境配置
    css: {
      preprocessorOptions: {
        scss: {
          // 处理全局公共样式兼容问题
          additionalData: `@import "./src/assets/css/_config.scss"; 
        @import "./src/assets/css/bem.scss"; 
        @import "./src/assets/css/mixins.scss";
        @import "./src/assets/css/vars.scss";`,
        },
      },
    },
    resolve: {
      extensions: [".js", ".vue", ".json", ".scss"], // 处理文件扩展名
      alias: {
        "@": path.resolve(__dirname, "src"), // 处理全局别名
      },
    },
    plugins: [createVuePlugin(), requireContext()],
    // 代理配置
    server: {
      port: 8888,
      strictPort: true,
      proxy: {
        "/api": {
          target: "http://127.0.0.1:8888",
          changeOrigin: true,
          secure: false,
          ws: true,
        },
      },
    },
  };
});

pnpm run dev pnpm run build