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
-.env.development
+# .env.development
-.env.test
+# .env.test
-.env.production
+# .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",
+    "build": "webpack --mode production",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "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 基础地址配置
+// API 配置
-const API_BASE_URL = {
+const API_BASE_URL = process.env.VUE_APP_API_URL;
-  development: 'http://localhost:8000',
-  testing: 'https://api-dev.beefast.co',
-  production: 'https://api.beefast.co'
-};
 
 // 当前环境的 API 基础地址
-const BASE_URL = API_BASE_URL[ENV];
+const BASE_URL = API_BASE_URL;
 
 export default {
   BASE_URL,

webpack.config.js

@@ -1,54 +1,94 @@
 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 = {
+module.exports = (env, argv) => {
-  mode: 'development',
+  // 默认为开发环境
-  entry: './src/main.js',
+  const mode = argv.mode || 'development';
-  output: {
+  
-    path: path.resolve(__dirname, 'dist'),
+  // 确定环境
-    filename: 'bundle.js',
+  const nodeEnv = env?.testing ? 'testing' : mode;
-    publicPath: '/'
+  
-  },
+  // 加载对应的环境变量文件
-  module: {
+  const envFile = `.env.${nodeEnv}`;
-    rules: [
+  const defaultEnvFile = '.env';
-      {
+  
-        test: /\.vue$/,
+  // 加载环境变量
-        loader: 'vue-loader'
+  let envConfig = {};
-      },
+  
-      {
+  // 先尝试加载默认环境变量文件
-        test: /\.js$/,
+  if (fs.existsSync(defaultEnvFile)) {
-        loader: 'babel-loader',
+    envConfig = dotenv.parse(fs.readFileSync(defaultEnvFile));
-        exclude: /node_modules/
-      },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader']
-      },
-      {
-        test: /\.(png|jpg|gif|svg)$/,
-        type: 'asset/resource'
-      }
-    ]
-  },
-  plugins: [
-    new VueLoaderPlugin(),
-    new HtmlWebpackPlugin({
-      template: './public/index.html'
-    })
-  ],
-  resolve: {
-    extensions: ['.js', '.vue', '.json'],
-    alias: {
-      '@': path.resolve(__dirname, 'src')
-    }
-  },
-  devServer: {
-    static: {
-      directory: path.join(__dirname, 'public'),
-    },
-    historyApiFallback: true,
-    port: 8080,
-    hot: true
   }
+  
+  // 再尝试加载特定环境的环境变量文件
+  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'),
+      filename: 'bundle.js',
+      publicPath: '/'
+    },
+    module: {
+      rules: [
+        {
+          test: /\.vue$/,
+          loader: 'vue-loader'
+        },
+        {
+          test: /\.js$/,
+          loader: 'babel-loader',
+          exclude: /node_modules/
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader']
+        },
+        {
+          test: /\.(png|jpg|gif|svg)$/,
+          type: 'asset/resource'
+        }
+      ]
+    },
+    plugins: [
+      new VueLoaderPlugin(),
+      new HtmlWebpackPlugin({
+        template: './public/index.html'
+      }),
+      new webpack.DefinePlugin(envKeys)
+    ],
+    resolve: {
+      extensions: ['.js', '.vue', '.json'],
+      alias: {
+        '@': path.resolve(__dirname, 'src')
+      }
+    },
+    devServer: {
+      static: {
+        directory: path.join(__dirname, 'public'),
+      },
+      historyApiFallback: true,
+      port: 8080,
+      hot: true
+    }
+  };
 };