feat: 添加打包是否启动cdn替换本地库配置,默认false不启动

This commit is contained in:
xiaoxian521
2022-10-26 19:51:06 +08:00
parent 936070c9ce
commit 49cdcf216f
9 changed files with 126 additions and 4 deletions

67
build/cdn.ts Normal file
View File

@@ -0,0 +1,67 @@
import { Plugin as importToCDN } from "vite-plugin-cdn-import";
/**
* @description 打包时采用`cdn`模式仅限外网使用默认不采用如果需要采用cdn模式请在 .env.production 文件,将 VITE_CDN 设置成true
* 平台采用国内cdnhttps://www.bootcdn.cn当然你也可以选择 https://unpkg.com 或者 https://www.jsdelivr.com
* 提醒mockjs不能用cdn模式引入会报错。正确的方式是生产环境删除mockjs使用真实的后端请求
* 注意上面提到的仅限外网使用也不是完全肯定的如果你们公司内网部署的有相关js、css文件也可以将下面配置对应改一下整一套内网版cdn
*/
export const cdn = importToCDN({
//prodUrl解释 name: 对应下面modules的nameversion: 自动读取本地package.json中dependencies依赖中对应包的版本号path: 对应下面modules的path
prodUrl: "https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}",
modules: [
{
name: "vue",
var: "Vue",
path: "vue.global.prod.min.js"
},
{
name: "vue-router",
var: "VueRouter",
path: "vue-router.global.min.js"
},
{
name: "vue-i18n",
var: "VueI18n",
path: "vue-i18n.runtime.global.prod.min.js"
},
// 项目中没有直接安装vue-demi但是pinia用到了所以需要在引入pinia前引入vue-demihttps://github.com/vuejs/pinia/blob/v2/packages/pinia/package.json#L77
{
name: "vue-demi",
var: "VueDemi",
path: "index.iife.min.js"
},
{
name: "pinia",
var: "Pinia",
path: "pinia.iife.min.js"
},
{
name: "element-plus",
var: "ElementPlus",
path: "index.full.min.js",
css: "index.min.css"
},
{
name: "axios",
var: "axios",
path: "axios.min.js"
},
{
name: "dayjs",
var: "dayjs",
path: "dayjs.min.js"
},
{
name: "echarts",
var: "echarts",
path: "echarts.min.js"
},
{
name: "lodash",
var: "lodash",
// 可写`完整路径`,会替换`prodUrl`
path: "https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"
}
]
});

View File

@@ -7,7 +7,8 @@ const warpperEnv = (envConf: Recordable): ViteEnv => {
VITE_PROXY_DOMAIN: "",
VITE_PROXY_DOMAIN_REAL: "",
VITE_ROUTER_HISTORY: "",
VITE_LEGACY: false
VITE_LEGACY: false,
VITE_CDN: false
};
for (const envName of Object.keys(envConf)) {

View File

@@ -1,3 +1,4 @@
import { cdn } from "./cdn";
import { resolve } from "path";
import vue from "@vitejs/plugin-vue";
import { viteBuildInfo } from "./info";
@@ -13,7 +14,11 @@ import themePreprocessorPlugin from "@pureadmin/theme";
import { genScssMultipleScopeVars } from "/@/layout/theme";
import DefineOptions from "unplugin-vue-define-options/vite";
export function getPluginsList(command, VITE_LEGACY) {
export function getPluginsList(
command: string,
VITE_LEGACY: boolean,
VITE_CDN: boolean
) {
const prodMock = true;
const lifecycle = process.env.npm_lifecycle_event;
return [
@@ -26,6 +31,7 @@ export function getPluginsList(command, VITE_LEGACY) {
}),
// jsx、tsx语法支持
vueJsx(),
VITE_CDN ? cdn : null,
DefineOptions(),
// 线上环境删除console
removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),