diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..8b342a3 --- /dev/null +++ b/.env.development @@ -0,0 +1,2 @@ +NODE_ENV=development +VUE_APP_API_URL=http://localhost:8000 \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..2288806 --- /dev/null +++ b/.env.production @@ -0,0 +1,2 @@ +NODE_ENV=production +VUE_APP_API_URL=https://api.beefast.co \ No newline at end of file diff --git a/.env.testing b/.env.testing new file mode 100644 index 0000000..7f5e76e --- /dev/null +++ b/.env.testing @@ -0,0 +1,2 @@ +NODE_ENV=testing +VUE_APP_API_URL=https://api-dev.beefast.co \ No newline at end of file diff --git a/.gitignore b/.gitignore index 2a867d2..7d9ba6e 100644 --- a/.gitignore +++ b/.gitignore @@ -63,10 +63,10 @@ ehthumbs.db desktop.ini # 本地配置文件 -.env -.env.development -.env.test -.env.production +# .env +# .env.development +# .env.test +# .env.production # 其他 .history diff --git a/Dockerfile b/Dockerfile index 4c25170..f2716a3 100644 --- a/Dockerfile +++ b/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 diff --git a/README.md b/README.md index 015744b..0e5e832 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index caba3d5..6fc433d 100644 --- a/package.json +++ b/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", diff --git a/src/utils/config.js b/src/utils/config.js index 98f278d..0cf1b07 100644 --- a/src/utils/config.js +++ b/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, diff --git a/webpack.config.js b/webpack.config.js index 86f96f3..a37bf12 100644 --- a/webpack.config.js +++ b/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 = { - mode: 'development', - 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' - }) - ], - resolve: { - extensions: ['.js', '.vue', '.json'], - alias: { - '@': path.resolve(__dirname, 'src') - } - }, - devServer: { - static: { - directory: path.join(__dirname, 'public'), - }, - historyApiFallback: true, - port: 8080, - hot: true +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'), + 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 + } + }; }; \ No newline at end of file