${shop.name}
@@ -253,11 +258,12 @@ export default {
// 定位到用户位置
const centerToUserLocation = () => {
- if (!map.value) return;
+ if (!map.value || !isAmapLoaded()) return;
+ const AMap = getAMap();
// 使用高德地图的定位插件
- window.AMap.plugin("AMap.Geolocation", () => {
- const geolocation = new window.AMap.Geolocation({
+ AMap.plugin("AMap.Geolocation", () => {
+ const geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位
timeout: 10000, // 超时时间
maximumAge: 0, // 定位结果缓存0毫秒
@@ -308,8 +314,11 @@ export default {
// 全局函数，供弹窗按钮调用
window.navigationToShop = (lng, lat) => {
- window.AMap.plugin("AMap.Geolocation", () => {
- const geolocation = new window.AMap.Geolocation({
+ if (!isAmapLoaded()) return;
+
+ const AMap = getAMap();
+ AMap.plugin("AMap.Geolocation", () => {
+ const geolocation = new AMap.Geolocation({
enableHighAccuracy: true, // 是否使用高精度定位
timeout: 10000, // 超时时间
maximumAge: 0, // 定位结果缓存0毫秒
@@ -385,7 +394,16 @@ export default {
});
onMounted(() => {
- initMap();
+ // 等待 AMap API 加载完成后再初始化地图
+ const checkAndInitMap = () => {
+ if (isAmapLoaded()) {
+ initMap();
+ } else {
+ // 如果 AMap 还未加载，等待一段时间后重试
+ setTimeout(checkAndInitMap, 100);
+ }
+ };
+ checkAndInitMap();
});
onUnmounted(() => {
diff --git a/src/main.js b/src/main.js
index 5a7884f..5311fd7 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,20 +1,84 @@
import { createApp } from "vue";
-import App from "./App.vue";
-import router from "./router";
import store from "./store";
-import "../public/iconfont/iconfont.css"
-import "../public/iconfont/iconfont.js"
-import "@/assets/css/iconfont-symbol.css"
+import "../public/iconfont/iconfont.css";
+import "../public/iconfont/iconfont.js";
+import "@/assets/css/iconfont-symbol.css";
// Element Plus
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
-const app = createApp(App);
+async function initializeApp() {
+ try {
+ console.log("Loading application configuration...");
+ await store.dispatch("environment/loadConfig");
+ console.log("Configuration loaded successfully");
-// Register Element Plus icons
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
- app.component(key, component);
+ const [{ default: App }, { default: router }, { loadAmapAPI }] =
+ await Promise.all([
+ import("./App.vue"),
+ import("./router"),
+ import("./utils/amapLoader"),
+ ]);
+
+ const amapKey = store.getters["environment/amapKey"];
+ if (amapKey) {
+ console.log("Loading AMap API...");
+ try {
+ await loadAmapAPI(amapKey);
+ console.log("AMap API loaded successfully");
+ } catch (error) {
+ console.warn("Failed to load AMap API:", error.message);
+ }
+ } else {
+ console.warn(
+ "AMap API key not configured, map functionality may be limited"
+ );
+ }
+
+ const app = createApp(App);
+
+ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+ app.component(key, component);
+ }
+ app.use(store).use(router).use(ElementPlus).mount("#app");
+
+ console.log("Application initialized successfully");
+ } catch (error) {
+ console.error("Failed to initialize application:", error);
+
+ const errorDiv = document.createElement("div");
+ errorDiv.innerHTML = `
+
+
应用初始化失败
+
无法加载应用配置，请检查网络连接或联系管理员
+
+
+ `;
+ document.body.appendChild(errorDiv);
+ }
}
-app.use(store).use(router).use(ElementPlus).mount("#app");
+// Initialize the application
+initializeApp();
diff --git a/src/router/index.js b/src/router/index.js
index 4234c9b..21cc4f8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -20,7 +20,7 @@ const routes = [
];
const router = createRouter({
- history: createWebHistory(process.env.BASE_URL),
+ history: createWebHistory('/'),
routes,
});
diff --git a/src/store/index.js b/src/store/index.js
index 1b47b98..2a96de3 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -3,6 +3,7 @@ import shops from "./modules/shops";
import categories from "./modules/categories";
import ui from "./modules/ui";
import user from "./modules/user";
+import environment from "./modules/environment";
import createPersistedState from 'vuex-persistedstate';
export default createStore({
@@ -15,6 +16,7 @@ export default createStore({
categories,
ui,
user,
+ environment,
},
plugins: [
// veux持久化配置
diff --git a/src/store/modules/environment.js b/src/store/modules/environment.js
new file mode 100644
index 0000000..0853e88
--- /dev/null
+++ b/src/store/modules/environment.js
@@ -0,0 +1,56 @@
+export default {
+ namespaced: true,
+
+ state: {
+ config: {},
+ },
+
+ getters: {
+ apiBaseUrl: (state) => {
+ return state.config.API_BASE_URL || "http://localhost:8080";
+ },
+
+ amapKey: (state) => {
+ return state.config.AMAP_KEY || "";
+ },
+ },
+
+ mutations: {
+ SET_CONFIG(state, config) {
+ state.config = { ...config };
+ },
+ },
+
+ actions: {
+ async loadConfig({ commit }) {
+ try {
+ const response = await fetch("/config.json", {
+ cache: "no-cache",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+
+ if (!response.ok) {
+ throw new Error(
+ `Failed to load configuration: ${response.status} ${response.statusText}`
+ );
+ }
+
+ const config = await response.json();
+ commit("SET_CONFIG", config);
+ return config;
+ } catch (error) {
+ console.error("Failed to load configuration:", error);
+
+ const fallbackConfig = {
+ API_BASE_URL: "http://localhost:8080",
+ AMAP_KEY: "",
+ };
+
+ commit("SET_CONFIG", fallbackConfig);
+ return fallbackConfig;
+ }
+ },
+ },
+};
diff --git a/src/utils/amapLoader.js b/src/utils/amapLoader.js
new file mode 100644
index 0000000..87f682f
--- /dev/null
+++ b/src/utils/amapLoader.js
@@ -0,0 +1,57 @@
+
+let amapLoaded = false;
+let amapLoadPromise = null;
+
+
+export function loadAmapAPI(apiKey) {
+ // 如果已经加载过，直接返回
+ if (amapLoaded && window.AMap) {
+ return Promise.resolve(window.AMap);
+ }
+
+ if (amapLoadPromise) {
+ return amapLoadPromise;
+ }
+
+ // 创建加载 Promise
+ amapLoadPromise = new Promise((resolve, reject) => {
+ if (window.AMap) {
+ amapLoaded = true;
+ resolve(window.AMap);
+ return;
+ }
+
+ const key = apiKey || '';
+
+
+ const script = document.createElement('script');
+ script.type = 'text/javascript';
+ script.src = `https://webapi.amap.com/maps?v=2.0&key=${key}&plugin=AMap.Scale,AMap.ToolBar,AMap.ControlBar,AMap.Geolocation`;
+ script.onload = () => {
+ if (window.AMap) {
+ amapLoaded = true;
+ console.log('高德地图 API 加载成功');
+ resolve(window.AMap);
+ } else {
+ reject(new Error('高德地图 API 加载失败'));
+ }
+ };
+
+
+ script.onerror = () => {
+ reject(new Error('高德地图 API 脚本加载失败'));
+ };
+ document.head.appendChild(script);
+ });
+
+ return amapLoadPromise;
+}
+
+
+export function isAmapLoaded() {
+ return amapLoaded && window.AMap;
+}
+
+export function getAMap() {
+ return window.AMap || null;
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index 31d33b4..d821495 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -1,64 +1,121 @@
/**
* Axios 二次封装
*/
-import axios from 'axios'
-import { ElMessage } from 'element-plus'
-import store from '@/store' // Import Vuex store
+import axios from "axios";
+import { ElMessage } from "element-plus";
+import store from "@/store"; // Import Vuex store
-const serverConfig = {
- localURL: process.env.VUE_APP_BACKEND_URL,
+// Get configuration from environment store
+const getServerConfig = () => {
+ return {
+ localURL: store.getters["environment/apiBaseUrl"],
+ timeout: 10000,
useTokenAuthorization: true, // 开启Token认证
-}
+ };
+};
-// 创建axios实例
-const request = axios.create({
+// 创建axios
+const createAxiosInstance = () => {
+ const config = getServerConfig();
+ return axios.create({
// 通用请求地址前缀
- baseURL: serverConfig.localURL,
- // 超时时间，单位（毫秒）
- timeout: 10000,
- withCredentials: true
-})
+ baseURL: config.localURL,
+ timeout: config.timeout,
+ withCredentials: true,
+ });
+};
+
+// 初始化请求实例
+let request = createAxiosInstance();
+
+let isConfigLoaded = false;
+const checkConfigAndReinitialize = () => {
+ const config = store.state.environment.config;
+ if (config && Object.keys(config).length > 0 && !isConfigLoaded) {
+ console.log(
+ "Environment config loaded, reinitializing request instance..."
+ );
+ reinitializeRequest();
+ isConfigLoaded = true;
+ }
+};
+store.subscribe((mutation) => {
+ if (mutation.type === "environment/SET_CONFIG") {
+ checkConfigAndReinitialize();
+ }
+});
+
+// Function to reinitialize request instance with updated configuration
+export const reinitializeRequest = () => {
+ request = createAxiosInstance();
+
+ // Re-apply interceptors
+ setupInterceptors();
-// 请求拦截器
-request.interceptors.request.use(function (config) {
- console.log("request url: ", config.url);
- if (serverConfig.useTokenAuthorization && config.requireAuth == true) {
+ console.log("Request instance reinitialized with updated configuration");
+};
+
+// Function to setup interceptors (extracted for reuse)
+const setupInterceptors = () => {
+ // Clear existing interceptors
+ request.interceptors.request.clear();
+ request.interceptors.response.clear();
+
+ // Re-apply request interceptor
+ request.interceptors.request.use(
+ function (config) {
+ console.log("request url: ", config.url);
+ const serverConfig = getServerConfig();
+ if (serverConfig.useTokenAuthorization && config.requireAuth == true) {
const user = store.state.user.user;
let token = user ? user.jwtToken : null;
if (token) {
- config.headers.authorization = "Bearer " + token;
+ config.headers.authorization = "Bearer " + token;
}
+ }
+ return config;
+ },
+ function (error) {
+ // 对请求错误做些什么
+ return Promise.reject(error);
}
- return config;
-}, function (error) {
- // 对请求错误做些什么
- return Promise.reject(error);
-});
+ );
+
+ // Re-apply response interceptor
+ request.interceptors.response.use(
+ function (response) {
+ // 对响应数据做点什么
-// 响应拦截器
-request.interceptors.response.use(function (response) {
- // 对响应数据做点什么
-
- // 如果是blob类型（如图片流），直接返回数据
- if (response.config.responseType === 'blob') {
+ // 如果是blob类型（如图片流），直接返回数据
+ if (response.config.responseType === "blob") {
return response.data;
- }
- // 处理普通JSON响应
- if (response.data.code != "200") {
- if (response.data.code == "5000" || response.data.code == "5001" || response.data.code == "5002") {
- // 清除 Vuex 中的用户数据 (使用命名空间)
- store.commit('user/SET_USER', null);
- ElMessage({
- showClose: true,
- message: response.data.code + " | " + response.data.message,
- type: 'error',
- })
+ }
+ // 处理普通JSON响应
+ if (response.data.code != "200") {
+ if (
+ response.data.code == "5000" ||
+ response.data.code == "5001" ||
+ response.data.code == "5002"
+ ) {
+ // 清除 Vuex 中的用户数据 (使用命名空间)
+ store.commit("user/SET_USER", null);
+ ElMessage({
+ showClose: true,
+ message: response.data.code + " | " + response.data.message,
+ type: "error",
+ });
}
+ }
+ return response.data;
+ },
+ function (error) {
+ // 对响应错误做点什么
+ return Promise.reject(error);
}
- return response.data;
-}, function (error) {
- // 对响应错误做点什么
- return Promise.reject(error);
-});
+ );
+};
+
+// Initialize interceptors
+setupInterceptors();
-export default request;
\ No newline at end of file
+export default request;
diff --git a/start.sh b/start.sh
new file mode 100755
index 0000000..8c2f509
--- /dev/null
+++ b/start.sh
@@ -0,0 +1,70 @@
+#!/bin/bash
+
+# 美食地图前端快速启动脚本
+
+set -e
+
+echo "🍕 美食地图前端部署脚本"
+echo "=========================="
+
+# 检查 Docker 是否安装
+if ! command -v docker &> /dev/null; then
+ echo "❌ Docker 未安装，请先安装 Docker"
+ exit 1
+fi
+
+# 设置默认值
+API_BASE_URL=${API_BASE_URL:-"http://localhost:8080"}
+AMAP_KEY=${AMAP_KEY:-""}
+PORT=${PORT:-"80"}
+CONTAINER_NAME=${CONTAINER_NAME:-"delicious-food-map-web"}
+
+echo "📋 配置信息："
+echo " API_BASE_URL: $API_BASE_URL"
+echo " AMAP_KEY: ${AMAP_KEY:0:10}..."
+echo " PORT: $PORT"
+echo " CONTAINER_NAME: $CONTAINER_NAME"
+echo ""
+
+# 停止并删除现有容器
+if docker ps -a --format 'table {{.Names}}' | grep -q "^${CONTAINER_NAME}$"; then
+ echo "🛑 停止现有容器..."
+ docker stop $CONTAINER_NAME
+ docker rm $CONTAINER_NAME
+fi
+
+# 构建镜像
+echo "🔨 构建 Docker 镜像..."
+docker build -t delicious-food-map-web .
+
+# 运行容器
+echo "🚀 启动容器..."
+docker run -d \
+ --name $CONTAINER_NAME \
+ -p $PORT:80 \
+ -e API_BASE_URL="$API_BASE_URL" \
+ -e AMAP_KEY="$AMAP_KEY" \
+ --restart unless-stopped \
+ delicious-food-map-web
+
+# 等待容器启动
+echo "⏳ 等待容器启动..."
+sleep 5
+
+# 检查容器状态
+if docker ps --format 'table {{.Names}}' | grep -q "^${CONTAINER_NAME}$"; then
+ echo "✅ 容器启动成功！"
+ echo ""
+ echo "🌐 访问地址："
+ echo " http://localhost:$PORT"
+ echo ""
+ echo "🔍 查看日志："
+ echo " docker logs -f $CONTAINER_NAME"
+ # echo ""
+ # echo "🛑 停止服务："
+ # echo " docker stop $CONTAINER_NAME"
+else
+ echo "❌ 容器启动失败，请检查日志："
+ echo " docker logs $CONTAINER_NAME"
+ exit 1
+fi
diff --git a/vue.config.js b/vue.config.js
index 060999e..022fce8 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,3 +1,33 @@
+const fs = require("fs");
+const path = require("path");
+
module.exports = {
- lintOnSave: false, // 关键配置
-};
\ No newline at end of file
+ lintOnSave: false,
+
+ devServer: {
+ setupMiddlewares: (middlewares, devServer) => {
+ devServer.app.get("/config.json", (req, res) => {
+ const configLocalPath = path.join(
+ __dirname,
+ "public/config.json.local"
+ );
+ const configPath = path.join(__dirname, "public/config.json");
+
+ const targetPath = fs.existsSync(configLocalPath)
+ ? configLocalPath
+ : configPath;
+ try {
+ const config = fs.readFileSync(targetPath, "utf8");
+ res.setHeader("Content-Type", "application/json");
+ res.setHeader("Cache-Control", "no-cache");
+ res.send(config);
+ } catch (error) {
+ console.error("Failed to read config file:", error);
+ res.status(500).json({ error: "Failed to load configuration" });
+ }
+ });
+
+ return middlewares;
+ },
+ },
+};