uos 使用nginx配置vue2站点

1. 准备工作

# 确保nginx已安装并运行
sudo systemctl status nginx

# 如果未运行，启动nginx
sudo systemctl start nginx
sudo systemctl enable nginx

2. 放置Vue2项目文件

# 创建站点目录（假设项目名为my-vue-app）
sudo mkdir -p /var/www/my-vue-app

# 将Vue2打包后的dist目录内容复制到站点目录
# 假设你的Vue项目打包后生成dist文件夹
sudo cp -r /path/to/your/vue-project/dist/* /var/www/my-vue-app/

# 设置正确的权限
sudo chown -R www-data:www-data /var/www/my-vue-app
sudo chmod -R 755 /var/www/my-vue-app

3. 配置Nginx站点

# 创建Nginx配置文件
sudo nano /etc/nginx/sites-available/my-vue-app

在配置文件中添加以下内容：

 

server {
        listen       8080;
        server_name  web;

        location / {
            root   /data/www/web;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
         
    }

注意：如果Vue项目使用的是hash模式路由，可以省略history模式的路由处理配置。

 

4. 启用站点并测试配置

 

# 创建符号链接启用站点
sudo ln -s /etc/nginx/sites-available/my-vue-app /etc/nginx/sites-enabled/

# 测试Nginx配置语法
sudo nginx -t

# 如果测试成功，重启Nginx
sudo systemctl reload nginx
# 或
sudo systemctl restart nginx