vite2+vue2配置

项目目录

项目依赖

{
  "name": "vite-vue2-js",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build:test": "vite build --mode test",
    "build:prod": "vite build --mode production",
    "build:staging": "vite build --mode staging",
    "serve": "vite preview"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^22.0.2",
    "rollup-plugin-external-globals": "^0.6.1",
    "vite": "^2.6.4",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-html": "^3.2.0",
    "vite-plugin-vue2": "^2.0.2"
  },
  "dependencies": {
    "vue": "^2.7.10",
    "vue-router": "^3.6.5"
  }
}

vite.config.js配置

import { defineConfig, loadEnv } from "vite";
import { createVuePlugin } from "vite-plugin-vue2";
import compressPlugin from "vite-plugin-compression"; // gzip压缩
import { createHtmlPlugin } from "vite-plugin-html";
import commonjs from "@rollup/plugin-commonjs";
import externalGlobals from "rollup-plugin-external-globals";
import { resolve } from "path";

function pathResolve(dir) {
  return resolve(process.cwd(), '.', dir)
}

const externals = {
  vue: "Vue",
  "vue-router": "VueRouter",
  axios: "axios",
};

export default ({ mode }) => {
  return defineConfig({
    server: {
      host: '0.0.0.0',
      port: 8080,
      proxy: { // 代理
        [loadEnv(mode, process.cwd()).VITE_BASE_API]: {
          target: 'https://api.xx.com',
          changeOrigin: true,
          pathRewrite: {
            ['^' + loadEnv(mode, process.cwd()).VITE_BASE_API]: '',
          },
        },
      },
    },
    // envPrefix: "VITE_", // 设置代码环境变量的前缀
    plugins: [
      createVuePlugin( /*options*/ ),
      createHtmlPlugin({
        minify: true,
        /**
         * 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
         * @default src/main.js
         */
        // entry: 'src/main.js',
        /**
         * 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置
         * @default index.html
         */
        template: 'public/index.html',
        /**
         * 需要注入 index.html ejs 模版的数据
         */
        inject: {
          data: {
            title: loadEnv(mode, process.cwd()).VITE_SYSTEM_TITLE,
            injectScript: `<script src="./inject.js"></script>`,
          },
        },
      }),
      compressPlugin({ // gzip静态资源压缩
        filter: /\.(js|css)$/i,
        verbose: true,
        disable: false,
        threshold: 10240,
        algorithm: "gzip",
        ext: ".gz"
      })
    ],
    resolve: {
      extensions: [".vue", ".js"],
      alias: {
        "@": pathResolve("src")
      }
    },
    build: {
      // chunkSizeWarningLimit: 1500, // 提高超大静态资源警告门槛
      terserOptions: { // 清除console和debugger
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },
      rollupOptions: { // build时文件打包命名
        output: {
          chunkFileNames: "static/js/[name]-[hash].js",
          entryFileNames: "static/js/[name]-[hash].js",
          assetFileNames: "static/[ext]/[name]-[hash].[ext]",
          manualChunks(id) { // 超大静态资源拆分
            if (id.includes("node_modules")) {
              return id.toString().split("node_modules/")[1].split('/')[0].toString();
            }
          },
        },
        external: ["vue", "vue-router"],
        plugins: [
          commonjs(), // 转换 CJS -> ESM, 通过 cdn 引入的没法转
          externalGlobals(externals),
        ],
      }
    }
  })
}

.env.配置

# 开发环境

NODE_ENV=development

# 请求接口基准地址 在业务代码中通过import.meta.env.VITE_BASE_API获取
VITE_BASE_API="/dev-api"
VITE_SYSTEM_TITLE="XXX SYSTEM(DEV)"