update

.env.development

@@ -0,0 +1,2 @@
+NODE_ENV=development
+VUE_APP_API_URL=http://localhost:8000 

.env.production

@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_API_URL=https://api.beefast.co 

.env.testing

@@ -0,0 +1,2 @@
+NODE_ENV=testing
+VUE_APP_API_URL=https://api-dev.beefast.co 

.gitignore

@@ -63,10 +63,10 @@ ehthumbs.db
 desktop.ini
 
 # 本地配置文件
-.env
-.env.development
-.env.test
-.env.production
+# .env
+# .env.development
+# .env.test
+# .env.production
 
 # 其他
 .history

Dockerfile

@@ -5,7 +5,7 @@ FROM node:18-alpine as build-stage
 RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
 
 # 设置环境变量
-ARG NODE_ENV
+ARG NODE_ENV=production
 ENV NODE_ENV=${NODE_ENV}
 
 # 安装 yarn
@@ -27,8 +27,14 @@ RUN yarn install --frozen-lockfile
 # 复制项目文件
 COPY . .
 
-# 构建项目
-RUN yarn build
+# 根据环境变量选择构建命令
+RUN if [ "$NODE_ENV" = "production" ]; then \
+        yarn build:prod; \
+    elif [ "$NODE_ENV" = "testing" ]; then \
+        yarn build:test; \
+    else \
+        yarn build:dev; \
+    fi
 
 # 生产阶段
 FROM nginx:stable-alpine as production-stage

README.md

@@ -45,7 +45,14 @@ npm run build
 
 ```bash
 # 构建镜像
-docker build -t partner-admin:latest .
+# 构建测试环境镜像
+docker build --build-arg NODE_ENV=testing -t partner:0.1.5 .
+
+# 构建生产环境镜像
+docker build --build-arg NODE_ENV=production -t partner:0.1.5 .
+
+# 构建开发环境镜像
+docker build --build-arg NODE_ENV=development -t partner:0.1.5 .
 
 # 运行容器
 docker run -d -p 8080:80 --name partner-admin partner-admin:latest

package.json

@@ -5,8 +5,10 @@
   "main": "index.js",
   "scripts": {
     "dev": "webpack serve --mode development",
-    "build": "webpack --mode development",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "webpack --mode production",
+    "build:dev": "webpack --mode development",
+    "build:test": "webpack --mode development --env testing",
+    "build:prod": "webpack --mode production"
   },
   "keywords": [
     "vue",
@@ -29,6 +31,7 @@
     "@vue/compiler-sfc": "^3.0.0",
     "babel-loader": "^10.0.0",
     "css-loader": "^7.1.2",
+    "dotenv": "^16.3.1",
     "html-webpack-plugin": "^5.0.0",
     "style-loader": "^4.0.0",
     "vue-loader": "^17.0.0",

src/utils/config.js

@@ -1,15 +1,11 @@
 // 环境配置
 const ENV = process.env.NODE_ENV || 'development';
 
-// API 基础地址配置
-const API_BASE_URL = {
-  development: 'http://localhost:8000',
-  testing: 'https://api-dev.beefast.co',
-  production: 'https://api.beefast.co'
-};
+// API 配置
+const API_BASE_URL = process.env.VUE_APP_API_URL;
 
 // 当前环境的 API 基础地址
-const BASE_URL = API_BASE_URL[ENV];
+const BASE_URL = API_BASE_URL;
 
 export default {
   BASE_URL,

webpack.config.js

@@ -1,9 +1,47 @@
 const path = require('path');
 const { VueLoaderPlugin } = require('vue-loader');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+const dotenv = require('dotenv');
+const fs = require('fs');
 
-module.exports = {
-  mode: 'development',
+module.exports = (env, argv) => {
+  // 默认为开发环境
+  const mode = argv.mode || 'development';
+  
+  // 确定环境
+  const nodeEnv = env?.testing ? 'testing' : mode;
+  
+  // 加载对应的环境变量文件
+  const envFile = `.env.${nodeEnv}`;
+  const defaultEnvFile = '.env';
+  
+  // 加载环境变量
+  let envConfig = {};
+  
+  // 先尝试加载默认环境变量文件
+  if (fs.existsSync(defaultEnvFile)) {
+    envConfig = dotenv.parse(fs.readFileSync(defaultEnvFile));
+  }
+  
+  // 再尝试加载特定环境的环境变量文件
+  if (fs.existsSync(envFile)) {
+    envConfig = { ...envConfig, ...dotenv.parse(fs.readFileSync(envFile)) };
+  }
+  
+  // 将环境变量转换为 webpack 定义插件需要的格式
+  const envKeys = Object.keys(envConfig).reduce((prev, next) => {
+    prev[`process.env.${next}`] = JSON.stringify(envConfig[next]);
+    return prev;
+  }, {});
+  
+  // 确保 NODE_ENV 被正确设置
+  envKeys['process.env.NODE_ENV'] = JSON.stringify(nodeEnv);
+  
+  console.log(`Building for ${nodeEnv} environment`);
+  
+  return {
+    mode,
     entry: './src/main.js',
     output: {
       path: path.resolve(__dirname, 'dist'),
@@ -35,7 +73,8 @@ module.exports = {
       new VueLoaderPlugin(),
       new HtmlWebpackPlugin({
         template: './public/index.html'
-    })
+      }),
+      new webpack.DefinePlugin(envKeys)
     ],
     resolve: {
       extensions: ['.js', '.vue', '.json'],
@@ -51,4 +90,5 @@ module.exports = {
       port: 8080,
       hot: true
     }
+  };
 };