vue项目配置nginx

将 Vue 项目部署到 Nginx 上相对简单，以下是一般的步骤：

1. 构建 Vue 项目

在部署之前，需要先构建生产版本的 Vue 项目。

cd /path/to/vue/project
npm install        # 安装依赖（如果还没有安装）
npm run build      # 构建生产版本

这将在项目目录下生成一个 dist 文件夹，其中包含了经过优化和打包后的生产版本的代码。

2. 配置 Nginx

1. 在 Nginx 的配置文件中创建一个新的 server 配置块，例如 /etc/nginx/sites-available/vue_project.conf。

2. 在这个配置文件中添加以下内容：

   server {
       listen 80;
       server_name your_domain.com;
   
       location / {
           root /path/to/vue/project/dist;
           index index.html;
           try_files $uri $uri/ /index.html;
       }
   }
   

   • listen 指定 Nginx 监听的端口，一般是 80。
   • server_name 指定你的域名或服务器的 IP 地址。
   • location 指定了 Vue 项目的根目录和 index.html 文件。try_files 用于处理路由模式下的页面刷新问题。

3. 创建一个符号链接到 sites-enabled 目录中：

   sudo ln -s /etc/nginx/sites-available/vue_project.conf /etc/nginx/sites-enabled/
   

4. 测试 Nginx 配置是否正确：

   sudo nginx -t
   

   如果没有报错，说明配置文件有效。

5. 重新加载 Nginx 以使配置生效：

   sudo systemctl reload nginx
   

3. 测试访问

现在，你的 Vue 项目已经部署到 Nginx 上了。可以通过浏览器访问你的域名或服务器 IP 地址来查看你的 Vue 应用。

http://your_domain.com

如果一切顺利，你应该能够看到你的 Vue 应用正常运行。