docker替换变量，只在production环境进行处理
This commit is contained in:
+8
-4
@@ -7,14 +7,18 @@
|
||||
<title>应急就医服务中心</title>
|
||||
<!-- 全局配置 -->
|
||||
<script>
|
||||
// 默认值（可选）
|
||||
window.__APP_ENV__ = {
|
||||
VITE_GLOB_API_URL: '__VITE_GLOB_API_URL__', // 占位符，Docker 替换
|
||||
};
|
||||
// // 默认值（可选）
|
||||
// window.__APP_ENV__ = {
|
||||
// VITE_GLOB_API_URL: '__VITE_GLOB_API_URL__', // 占位符，Docker 替换
|
||||
// };
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: "1b3b86585c863d22db1e7f7636a9e495",
|
||||
}
|
||||
</script>
|
||||
<!-- __APP_ENV__ 由 Vite 在构建时注入 -->
|
||||
<!-- 开发环境：不注入或注入空值 -->
|
||||
<!-- 生产环境：注入真实值（或占位符供 Docker 替换） -->
|
||||
<!-- __INJECT_APP_ENV__ -->
|
||||
</head>
|
||||
<style>
|
||||
html, body, #app {
|
||||
|
||||
+1
-1
@@ -12,7 +12,7 @@
|
||||
|
||||
export function getAppEnvConfig() {
|
||||
// 1. 优先：运行时注入（Docker）
|
||||
const runtimeEnv = (window as any).__APP_ENV__;
|
||||
const runtimeEnv = (window as any).__APP_ENV__ || {};
|
||||
|
||||
// 2. 其次：构建时环境变量（.env 文件）
|
||||
const buildEnv = import.meta.env;
|
||||
|
||||
+77
-74
@@ -1,4 +1,4 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import { defineConfig, ConfigEnv, Plugin } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import { resolve } from 'path';
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||||
@@ -11,81 +11,84 @@ function pathResolve(dir: string) {
|
||||
|
||||
const px2remOptions = {
|
||||
remUnit: 14,
|
||||
rootValue: 17, //换算基数， 默认100 ,也就是1440px ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了
|
||||
unitPrecision: 5, //允许REM单位增长到的十进制数字，其实就是精度控制
|
||||
// propWhiteList: [], // 默认值是一个空数组，这意味着禁用白名单并启用所有属性。
|
||||
// propBlackList: [], // 黑名单
|
||||
// exclude:false, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
|
||||
// selectorBlackList: [], //要忽略并保留为px的选择器
|
||||
// ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
|
||||
// replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
|
||||
mediaQuery: false, //（布尔值）允许在媒体查询中转换px
|
||||
minPixelValue: 2, //设置要替换的最小像素值(3px会被转rem)。 默认 0
|
||||
rootValue: 17,
|
||||
unitPrecision: 5,
|
||||
mediaQuery: false,
|
||||
minPixelValue: 2,
|
||||
};
|
||||
|
||||
// 👉 定义插件（更健壮）
|
||||
const injectAppEnvPlugin = (): Plugin => {
|
||||
let isProduction = false;
|
||||
|
||||
return {
|
||||
name: 'inject-app-env',
|
||||
config(config, { mode }) {
|
||||
isProduction = mode === 'production';
|
||||
},
|
||||
transformIndexHtml: (html) => {
|
||||
// 确保 html 是字符串
|
||||
if (typeof html !== 'string') {
|
||||
console.warn('transformIndexHtml received non-string HTML');
|
||||
return html;
|
||||
}
|
||||
|
||||
if (!isProduction) {
|
||||
return html; // 开发环境不注入
|
||||
}
|
||||
|
||||
// 使用单行 script，避免换行问题
|
||||
const script = `<script>window.__APP_ENV__ = { VITE_GLOB_API_URL: '__VITE_GLOB_API_URL__' };</script>`;
|
||||
|
||||
// 插入到 </head> 前
|
||||
return html.replace('</head>', `${script}</head>`);
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
resolveExternalsPlugin({
|
||||
AMap: 'AMap',
|
||||
}),
|
||||
vueJsx(),
|
||||
],
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
less: {
|
||||
javascriptEnabled: true,
|
||||
},
|
||||
},
|
||||
postcss: {
|
||||
plugins: [postcssPluginPx2rem(px2remOptions)],
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias: [
|
||||
{
|
||||
find: /\/@\//,
|
||||
replacement: pathResolve('src') + '/',
|
||||
},
|
||||
export default defineConfig(({ mode }: ConfigEnv) => {
|
||||
return {
|
||||
plugins: [
|
||||
vue(),
|
||||
resolveExternalsPlugin({
|
||||
AMap: 'AMap',
|
||||
}),
|
||||
vueJsx(),
|
||||
injectAppEnvPlugin(), // 使用函数式插件
|
||||
],
|
||||
extensions: ['.js', '.ts', '.mjs', '.vue', '.json', '.less', '.css'],
|
||||
},
|
||||
server: {
|
||||
host: true,
|
||||
https: false,
|
||||
},
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
target: 'esnext',
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
less: {
|
||||
javascriptEnabled: true,
|
||||
},
|
||||
},
|
||||
postcss: {
|
||||
plugins: [postcssPluginPx2rem(px2remOptions)],
|
||||
},
|
||||
},
|
||||
// @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
|
||||
include: ['lodash-es', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'],
|
||||
},
|
||||
build: {
|
||||
target: 'esnext',
|
||||
sourcemap: false,
|
||||
// rollupOptions: {
|
||||
// output: {
|
||||
// //入口文件输出配置
|
||||
// entryFileNames: `assets/js/[name]-[hash].js`,
|
||||
// //代码分割后的文件输出配置
|
||||
// chunkFileNames: `assets/js/[name]-[hash].js`,
|
||||
// //静态资源输出配置
|
||||
// assetFileNames(assetInfo) {
|
||||
// //css文件单独输出到css文件夹
|
||||
// if (assetInfo.name.endsWith('.css')) {
|
||||
// return `assets/css/[name]-[hash].css`;
|
||||
// }
|
||||
// //图片文件单独输出到img文件夹
|
||||
// else if (['.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'].some((ext) => assetInfo.name.endsWith(ext))) {
|
||||
// return `assets/img/[name]-[hash].[ext]`;
|
||||
// }
|
||||
// //其他资源输出到assets文件夹
|
||||
// else {
|
||||
// return `assets/[name]-[hash].[ext]`;
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
},
|
||||
resolve: {
|
||||
alias: [
|
||||
{
|
||||
find: /\/@\//,
|
||||
replacement: pathResolve('src') + '/',
|
||||
},
|
||||
],
|
||||
extensions: ['.js', '.ts', '.mjs', '.vue', '.json', '.less', '.css'],
|
||||
},
|
||||
server: {
|
||||
host: true,
|
||||
https: false,
|
||||
},
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
target: 'esnext',
|
||||
},
|
||||
include: ['lodash-es', 'ant-design-vue/es/locale/zh_CN', 'ant-design-vue/es/locale/en_US'],
|
||||
},
|
||||
build: {
|
||||
target: 'esnext',
|
||||
sourcemap: false,
|
||||
},
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user