项目使用vite-plugin-static-copy和vite-plugin-html组件,想实现开发环境:根据配置引入内容或者全部内容,html 根据配置生成,生产环境分别根据配置打包,生产环境没有问题,就是开发环境,使用iframe 引用public内容会提示404,注释vite-plugin-html引用就没有问题了,试了好几个解决方案都不行,还有其他方案可以解决?
```javascript
import { defineConfig, loadEnv } from "vite";
import path from "path";
import createVitePlugins from "./vite/plugins";
// const baseUrl = "http://192.168.1.116:8080"; // 后端接口
const baseUrl = 'http://192.168.1.104:8080' // 后端接口
let views = {}
const base = ["error","monitor","redirect","system","tool"]
const other = [""]
views.baseModules = base
views.includedModules = other
// https://vitejs.dev/config/
export default defineConfig(({ mode, command }) => {
const env = loadEnv(mode, process.cwd());
const { VITE_APP_ENV ,VITE_BUILD_PROJECT} = env;
if(VITE_BUILD_PROJECT) other.push(VITE_BUILD_PROJECT)
return {
// 部署生产环境和开发环境下的URL。
// 默认情况下,vite 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ruoyi.vip/admin/,则设置 baseUrl 为 /admin/。
base: VITE_APP_ENV === "production" ? "" : "/",
publicDir: VITE_APP_ENV === "production" ? false :"public", // 禁用 Vite 默认的 public 文件夹复制行为
plugins: createVitePlugins(env, command === "build",views),
resolve: {
// https://cn.vitejs.dev/config/#resolve-alias
alias: {
// 设置路径
"~": path.resolve(__dirname, "./"),
// 设置别名
"@": path.resolve(__dirname, "./src"),
},
// https://cn.vitejs.dev/config/#resolve-extensions
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
},
// 打包配置
build: {
// https://vite.dev/config/build-options.html
sourcemap: command === "build" ? false : "inline",
outDir: "dist",
assetsDir: "assets",
chunkSizeWarningLimit: 2000,
rollupOptions: {
output: {
chunkFileNames: "static/js/[name]-[hash].js",
entryFileNames: "static/js/[name]-[hash].js",
assetFileNames: "static/[ext]/[name]-[hash].[ext]",
},
},
},
// vite 相关配置
server: {
port: 3000,
host: true,
open: true,
proxy: {
// https://cn.vitejs.dev/config/#server-proxy
"/dev-api": {
target: baseUrl,
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, ""),
},
// springdoc proxy
"^/v3/api-docs/(.*)": {
target: baseUrl,
changeOrigin: true,
},
},
},
css: {
postcss: {
plugins: [
{
postcssPlugin: "internal:charset-removal",
AtRule: {
charset: (atRule) => {
if (atRule.name === "charset") {
atRule.remove();
}
},
},
},
],
},
},
};
});
```javascript
import vue from "@vitejs/plugin-vue";
import createAutoImport from "./auto-import";
import createSvgIcon from "./svg-icon";
import createCompression from "./compression";
import createSetupExtend from "./setup-extend";
import createModuleFilter from "./filter-views";
import createPublicFilter from './filter-public';
import createEditHtml from './edit-html'
export default function createVitePlugins(viteEnv, isBuild = false, buildList) {
const vitePlugins = [vue()];
isBuild && vitePlugins.push(createPublicFilter(viteEnv));
vitePlugins.push(createEditHtml(viteEnv));
vitePlugins.push(createAutoImport());
vitePlugins.push(createSetupExtend());
vitePlugins.push(createSvgIcon(isBuild));
isBuild && vitePlugins.push(...createCompression(viteEnv));
isBuild && vitePlugins.push(createModuleFilter(buildList));
return vitePlugins;
}
import { viteStaticCopy } from 'vite-plugin-static-copy';
import { publics, getConfigByKey } from '../config/system'
export default function createPublicFilter(env) {
const { VITE_BUILD_PROJECT } = env
const systemPublics = getConfigByKey(publics,VITE_BUILD_PROJECT);
console.log(systemPublics);
return viteStaticCopy({
targets: systemPublics,
enableInDevMode: true
})
}
import { createHtmlPlugin } from 'vite-plugin-html';
import { html, getConfigByKey } from '../config/html'
export default function createEditHtml(env) {
const { VITE_BUILD_PROJECT } = env
const systemHtml = getConfigByKey(html,VITE_BUILD_PROJECT);
return createHtmlPlugin(systemHtml)
}
//index.html 文件配置
const defaultHtml = {
minify: true,
};
const html = {
license: {
inject: {
data: {
injectScript :` <script src="/drag/js/jquery.min.js"></script>
<script src="/drag/js/draggabilly.pkgd.min.js"></script>`
},
}
},
};
function getConfigByKey(routers, projectKey) {
if (!routers || typeof routers !== "object" || Array.isArray(routers)) {
return { ...defaultHtml };
}
if (typeof projectKey !== "string" || projectKey.trim() === "") {
return { ...defaultHtml };
}
const normalizedKey = projectKey.trim().toLowerCase();
const baseConfig = { ...defaultHtml };
if (routers.hasOwnProperty(normalizedKey)) {
const projectConfig = routers[normalizedKey];
return {
...baseConfig,
...projectConfig,
inject: {
...baseConfig.inject,
...projectConfig.inject,
},
};
}
return baseConfig;
}
export { html, getConfigByKey };
// public 是否打包配置
const defaultKey = [
{
src: "public/html",
dest: "",
},
{
src: "public/favicon.ico",
dest: "",
},
];
const publics = {
license: [
{
src: "public/drag",
dest: "",
},
],
ngbseal: [
{
src: "public/onlineSeal",
dest: "",
},
{
src: "public/sign",
dest: "",
},
],
sdjnseal: [
{
src: "public/sign",
dest: "",
},
],
};
function getConfigByKey(routers, projectKey) {
if (!routers || typeof routers !== "object") {
return [];
}
if (!projectKey || typeof projectKey !== "string") {
return [];
}
const normalizedKey = projectKey.trim().toLowerCase();
if (Object.prototype.hasOwnProperty.call(routers, normalizedKey)) {
return [...defaultKey, ...routers[normalizedKey]];
}
return [...defaultKey];
}
export { publics, getConfigByKey };