# Vue3 项目部署到 Linux 服务器
# 一、安装 nginx
# 1.1 安装
sudo apt-get install nginx
1
# 1.2 查看 nginx 版本，观察是否安装成功。
nginx -v
1
# 1.3 启动 nginx
sudo service nginx start
1
这时候访问服务器公网 IP，就可以看到
# 二、查看 nginx 配置
nginx 配置路径
/etc/nginx/sites-available/default
cat 查看发现根页面的地址是在 /var/www/html。
因此只要把 Vue3 项目打包后的 dist 目录中的所有文件放入到 /var/www/html 即可。
# 三、Vue3 添加 push 命令
在 package.json的 scripts中添加以下配置：
"push": "npm run build && scp -r dist/* root@43.142.56.47:/var/www/html"
1
配置解释：
npm run build是将 Vue 项目打包，生成 dist 目录及文件。
scp -r dist/* root@43.142.56.47:/var/www/html"
scp命令用于复制文件和目录。-r表示递归复制整个目录dist/*复制的文件root@43.142.56.47:/var/www/html"服务器用户名+服务器ip地址 + 文件的目标目录
最后 npm run push然后输入 root 密码即可。
# 三、自定义 dist 目录
有时候我们并不想把项目放到 /var/www/html 下，可以放在任意目录下。
# 3.1 修改 package.json
"push": "npm run build && scp -r dist/* root@43.142.56.47:/root/path"
1
这边在 ip 后，自定义自己想要在服务器中存放 dist 的目录。
之后会将 dist 目录下的文件传到 /root/path下。
# 3.2 配置 nginx.conf
之前 /var/www/html 是 nginx 默认配好在 80 端口，现在我们把 dist 下的文件放入别的路径，因此要在 nginx.conf 配置关联关系。
- 进入 nginx 目录
cd /etc/nginx
1
- 编辑
nginx.conf配置文件
vim nginx.conf
1
- 添加关联
server {
listen 9000;
location / {
root /root/vue-project/yunhu-utils/dist;
index index.html index.htm;
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
我这边的路径是 /root/vue-project/yunhu-utils/dist，然后端口绑定到 9000。
之后访问域名加 9000 端口号即可。