项目打包

这一步可以解决配置后访问出现404、空白页的问题（

1. 修改`vite.config.js`

添加 base，意思是 build 之后的外部资源都从当前目录的相对路径获取。
比如 main.js 不是 /main.js 而是 ./main.js。

export default defineConfig({
    base: './',
})

2. 修改`router/index.js`

默认的createWebHistory路由模式路径不带#号（生产环境下不能直接访问项目，需要nginx转发）

http://localhost:8080/#/

所以我们需要改为createWebHashHistory路由模式。

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  // 它本来默认是  createWebHistory()
})

3. 修改`baseURL`

修改http.js：

const http = axios.create({
    baseURL:'/api',
    timeout: 5000
})

修改vite.config.js：

server: {
    proxy: {
      '/api': {
        target: '', // 实际后端地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '') // 不可以省略rewrite
      }
    }
  }

原理是通过代理，将原本以/api开头的请求地址替换为实际的地址。

4. 打包

运行

npm run build

结束后可以在项目的目录下看到生成的dist目录。

云服务器配置

~~如何购买云服务器、初始化云服务器这里就不介绍了~（因为已经配完了（（~~

这里以阿里云为例，通过宝塔去完成网站的上线。

2024/05/15 更新：翻了一下之前的实验报告，竟然发现还有一个图，补上！（就是有点糊）顺便抄一下自己之前写的这篇（（

0. 初始化云服务器

首先创建实例，此处选择操作系统为CentOS 8.4 64位 SCC版，配置为2核(vCPU) 4 GiB 100 Mbps的服务器。

接着远程连接云服务器，安装宝塔

yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_6.0.sh && sh install.sh ed8484bec

安装完成后，开放宝塔端口，登陆宝塔，绑定手机号，点一键安装！

检查宝塔各软件是否完成安装

其中Nginx是本教程重点使用的软件（还有PHP也会用到，其他的这里暂时用不着），如果没安装上记得安装好（一开始的一键安装可能会安装失败）

1. 开放ECS端口

手动添加一条入站规则，端口为你想要配置网站所用的端口，源IP设为0.0.0.0/0

2. 添加宝塔内的防火墙端口规则

端口填上一步同一个端口即可。

3. 添加PHP项目站点

点击左侧栏中的网站，添加站点。

其中第一行随便写一个方便自己辨别的域名（要是有真的域名那也可以直接用），第二行写

ECS公网IP地址:你想设置的端口（和前面开放的一致）

其中如果设置1025端口，我这边最后会出现访问超时的情况，服务器也没有日志记录，原因未知。

4. 站点设置

4.1 域名管理

删除刚刚第一行的域名，留下IP:端口那条即可。

4.2 网站目录

运行目录设为/（有时候删了文件再重新传这里会变成别的，要改回来）

4.3 默认文档

在最上面加上dist

4.4 配置文件（重要）

添加（记得换成自己的后端地址）

## 添加上这个配置
        
    location /api{
        rewrite  ^/api/(.*)$ /$1 break;
        proxy_pass http://后端IP:后端端口;
        index index.html;
    }

5. 上传文件

打开第3步创建的根目录，将打包好的dist文件夹传进去即可。

6. 完成

访问ECS公网IP地址:设置的端口，大功告成！