多页面项目改造

1、添加vite.config.js配置文件

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue2";
import path from "path";
import vueJsx from "@vitejs/plugin-vue2-jsx";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), "");
  return {
    // vite 配置
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
    plugins: [
      vue(),
      vueJsx(),
      createSvgIconsPlugin({
        //指定需要换成的图片文件夹
        iconDirs: [path.resolve(process.cwd(), "src/assets/icons/svg")],
        symbolId: "icon-[name]",
      }),
    ],
    base:mode !== 'development' ? "/dyprd" : "/",
    build: {
      minify: terser,
      rollupOptions: {
        input: {
          index: path.resolve(__dirname, "index.html"),
          actmanager: path.resolve(__dirname, "actmanager/index.html"),
        },
        //确保外部化处理那些你不想打包进库的依赖
        // external: ["vue"],
        // output: {
        //   // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        //   globals: {
        //     vue: "Vue",
        //   },
        // },
      },
      //去除debugger
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src/"),
      },
      //忽略后缀名后面的配置选项
      extensions: [".js", ".json", ".vue"],
    },
    css: {
      preprocessorOptions: {
        //导入sass预编译程序
        scss: {
          additionalData:
            '@import "@/assets/styles/mixin.scss";',
        },
      },
    },
    server: {
      //设置访问域名
      host: "web.server.com",
      port: 88,//端口
      open: true,
    },
  };
});

2、package.json文件修改

"scripts": {
    "dev": "vite --mode development",
    "build": "vite build",
    "preview": "vite preview"
  }

3、环境变量

//在vite中，为了防止意外地将一些环境变量泄漏到客户端，只有以VITE_为前缀的变量才会暴露给经过 vite 处理的代码
由process.env.VUE_APP_BASE_API替换成import.meta.env.VITE_APP_BASE_API

//判断当前环境
由process.env.NODE_ENV替换成import.meta.env.NODE_ENV

4、svg图标

1、安装vite-plugin-svg-icons依赖
2、配置文件中
    createSvgIconsPlugin({
        //指定需要换成的图片文件夹
        iconDirs: [path.resolve(process.cwd(), "src/assets/icons/svg")],
        symbolId: "icon-[name]",
      }),
3、svg组件
4.在main文件中加入
    import 'virtual:svg-icons-register'

5、module.exports换成export default

6、使用scss文件中的变量

注：文件的命名规则必须是**.module.scss;

$base-menu-color:#bfcbd9;
$base-menu-color-active:#f4f4f5;
$base-sidebar-width: 200px;

:export {
  menuColor: $base-menu-color;
  menuLightColor: $base-menu-light-color;
  menuColorActive: $base-menu-color-active;
  menuBackground: $base-menu-background;
  menuLightBackground: $base-menu-light-background;
  subMenuBackground: $base-sub-menu-background;
  subMenuHover: $base-sub-menu-hover;
  sideBarWidth: $base-sidebar-width;
  }
  

1)在文件中使用

import variables from "@/assets/styles/variables.module.scss";
console.log(variables.menuColor,'+++');

2)在全局中使用

   css: {
      preprocessorOptions: {
        //导入sass预编译程序
        scss: {
          additionalData: '@import "@/assets/styles/variables.scss";',
          javascriptEnabled:true
        },
      },
    },

7、使用jsx

1)script标签上添加jsx
    <script lang="jsx">
2)安装@vitejs/plugin-vue2-jsx依赖，vite.config.js中添加配置，详细如1

8、element-ui会出现表格不显示的问题，将版本降到2.8.2就可以了