Vue3-减少应用部署打包体积的N种方式【持续更新】

Vue3默认支持OptionsAPI和Composition API 混编的方式进行开发，如果在新系统建设过程中完全抛弃了OptionsAPI方式，可以使用vite定义全局变量来告诉Vue关闭对OptionsAPI的响应。

本教程基于Vite进行部署的引用系统，如果是npm进行包管理和调试的，请参考其他教程

测试环境：

    "dependencies": {
        "@vicons/antd": "^0.12.0",
        "axios": "^0.26.1",
        "less": "^4.1.2",
        "less-loader": "^10.2.0",
        "naive-ui": "^2.26.3",
        "vue": "^3.2.25",
        "vue-router": "4"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^2.2.0",
        "vite": "^2.8.0"
    }

1/N

1、在项目根目录编辑vite.config,js,如果没有请新建，配置文件的格式和内容请参考官方，Vite配置文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      "coms": path.resolve(__dirname, "src/components"),
    },
  },
  define: {
  	//定义全局变量显式关闭__VUE_OPTIONS_API__
    __VUE_OPTIONS_API__: false,
  },
  server: {
    host: "127.0.0.1",
    port: 8000,
    autoOpenBrowser: true,
    https: true,
  },

})

2、 如何验证已经正确关闭__VUE_OPTIONS_API__

在JS中触发某个函数，打印JS作用域下的__VUE_OPTIONS_API__，获取其值，如果为设置的值false即已经关闭，vite中的define作用域为全局。

router.beforeEach((to, from, next) => {
  console.log('@Jump to', to.name);
  var token = window.sessionStorage.getItem('token');
  //打印全局变量是否被设置为了false，
  //如果打印正常即关闭__VUE_OPTIONS_API__
  console.log(__VUE_OPTIONS_API__)
  if (!token) {
    if (to.name !== "login") {
      next({ name: 'login' })
    } else {
      next()
    }
  } 
 });