基于pnpm搭建Vite+Vue2+element-ui项目

背景

基于目前技术的发展，出于对技术的好奇心以及需要新的技术框架来进行迭代升级；(由于目前所有的项目均是基于Vue2技术栈的)所以只进行新的包管理工具pnpm及工程化工具Vite来搭建一款新的项目模板。便于在后期的开发过程中通过pnpm+Vite的方式来提升研发效率。

兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。

安装 [pnpm.io/zh/installa…]

请注意Node版本兼容性

使用 PNPM:

$ pnpm create vite

请注意再这里选择framework的时候选择vanilla，选择Vue构建的就是Vue3的项目！

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

新建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

展示结果

源码地址 对您有帮助的话请给个star，谢谢！