ubuntu服务端运行vue网页步骤

第 1 步：本地打包（生成可以上线的文件）

检查 vite.config.js（或 vite.config.ts）

bash 复制代码

export default defineConfig({
  base: '/',          // 如果部署在根目录保持 '/'
  // 如果部署在子路径，例如 https://yourdomain.com/app/
  // base: '/app/',
  build: {
    outDir: 'dist',
    assetsDir: 'assets'
  }
})

base: '/', // 如果部署在根目录保持 '/'

这行要加上，得有这行

bash 复制代码

npm run build

得到vue生成的dist文件

第 2 步：准备好你的 Ubuntu 服务器信息

你需要知道以下信息（问给你服务器的人，或者你自己买服务器时会看到）：

服务器 IP 地址（例如 192.168.1.100 或公网 IP）

登录用户名（一般是 root 或 ubuntu）

登录密码，或者你已经配置了 SSH 密钥

用于通过ssh连接服务器

此处使用mobaXterm

第 3 步：开放防火墙端口（很重要！）

可以检查本机防火墙（ufw），看80有没有打开

先查看当前所有已开放的端口：

bash 复制代码

sudo ufw status

看输出结果里有没有这些：

22（SSH）

80（HTTP）

3000（你原来开的）

根据结果决定：

如果 80 没有，就执行：

bash 复制代码

sudo ufw allow 80

如果 22 或 3000 已经有了，就不用再执行 allow 命令。

如果发现某个端口不见了，再单独加回来即可。

最后执行一次：

bash 复制代码

sudo ufw reload
sudo ufw status

这样最安全，不会重复添加，也不会漏掉原来的端口。

对于腾讯云服务器，还需要在平台上也开放端口

第 4 步：在服务器上安装 Nginx（网站服务器）

登录到服务器后，依次执行下面命令（一行一行复制粘贴）：

bash 复制代码

# 更新软件列表
sudo apt update

# 安装 Nginx
sudo apt install nginx -y

# 启动 Nginx
sudo systemctl start nginx

# 设置开机自动启动
sudo systemctl enable nginx

安装完成后，在浏览器输入你的服务器 IP，如果能看到 Nginx 的欢迎页面，说明安装成功。

第 5 步：配置 Nginx（让它正确显示 Vue 页面）

1 登录服务器，创建配置文件：

bash 复制代码

sudo nano /etc/nginx/sites-available/default

把文件里原来的内容全部删除，然后粘贴下面这段：

bash 复制代码

server {
    listen 80;
    server_name _;   # 这里可以写你的域名，没有域名就保持 _

    root /var/www/html;
    index index.html;

    # 最重要的一行！解决 Vue 路由刷新后 404 的问题
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存（可选，提升速度）
    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

保存退出：

按 Ctrl + O 回车保存

按 Ctrl + X 退出

检查配置是否正确：

bash 复制代码

sudo nginx -t

看到 syntax is ok 和 test is successful 就说明没问题。

第 6步：把打包好的文件上传到服务器

我已经把打包文件放到 /home/ubuntu/vueproject/dist/ 了，接下来按下面步骤操作即可。

直接通过mobaXterm拖放文件夹进去的

第 1 步：把文件复制到网站目录

在服务器上执行：

bash 复制代码

# 清空原来默认的网站文件（可选，但推荐）
sudo rm -rf /var/www/html/*

# 把你上传的 dist 里的文件全部复制过去
sudo cp -r /home/ubuntu/vueproject/dist/* /var/www/html/

第 2 步：修改文件权限（很重要）

bash 复制代码

sudo chown -R www-data:www-data /var/www/html
sudo chmod -R 755 /var/www/html

第 3 步：确认 Nginx 配置是否正确

执行：

bash 复制代码

sudo nano /etc/nginx/sites-available/default

确保内容是下面这样（如果不是，就全部替换成这个）：

bash 复制代码

server {
    listen 80;
    server_name _;

    root /var/www/html;
    index index.html;

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

    location /assets/ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

保存退出：

按 Ctrl + O，回车

按 Ctrl + X

第 7 步：检查配置并重启 Nginx

bash 复制代码

sudo nginx -t

看到 syntax is ok 和 test is successful 后，执行：

bash 复制代码

sudo systemctl restart nginx

第 8 步：测试访问

在浏览器打开：

http://你的服务器IP

如果能看到页面，就成功了。