宝塔Nginx部署Vue项目：hash路由及后端交互

宝塔Nginx部署Vue项目：hash路由及后端交互

本文详细介绍如何使用宝塔面板部署Vue项目，并实现hash路由和与后端API的交互。

1. 创建站点和配置域名

在宝塔面板上创建一个新的站点，并配置好域名和SSL证书（如果需要）。

2. 配置Nginx代理

在站点的Nginx配置文件中添加以下内容，实现前端与后端API的代理：

location / {
  try_files $uri $uri/ /index.html;
}

location /api {
  proxy_pass http://your-backend-api-url;
}

其中，'your-backend-api-url' 是你的后端API的地址，可以是一个IP地址或域名。

3. 设置hash路由

在Vue项目中的'router/index.js'文件中，设置'mode'为'hash'，启用hash路由模式：

const router = new VueRouter({
  mode: 'hash',
  routes: [...]
})

4. 打包项目并上传

打包Vue项目，并将打包后的文件上传到宝塔站点的'public'目录下。

5. 重启Nginx并访问

重启Nginx服务器，访问站点即可。如果要访问后端API，可以通过'/api'路径进行访问，例如：

axios.get('/api/users').then(...)

注意：

• 确保你的后端API已经启动并可以正常访问。
• 使用hash路由模式可以避免页面刷新时URL发生改变，适合单页面应用的部署。
• 以上步骤只是基本的部署流程，实际操作中可能需要根据你的项目情况进行调整。