CaffeineOddity
Search K

Appearance

云服务器部署Vue3项目 ​

要使用Nginx来服务Vue.js 3构建的项目，您需要配置Nginx以将所有请求定向到您的Vue应用的index.html文件，这样单页面应用（SPA）的客户端路由才能正常工作。以下是配置Nginx的一些基本步骤：

安装Nginx： ​

如果您还没有安装Nginx，请参照nginx安装步骤进行安装。

构建Vue项目： ​

在将Vue项目部署到Nginx之前，您需要构建该项目。通常，这可以通过运行以下命令来完成：

bash
npm run build

这会将您的Vue项目构建到dist目录（默认情况下）。

配置Nginx： ​

您需要创建或修改Nginx的站点配置文件。这些文件通常位于/etc/nginx/conf.d/或/etc/nginx/sites-available目录下。例如，创建一个名为vue-app.conf的文件：

bash
sudo vi /etc/nginx/conf.d/vue-app.conf

编写Nginx配置： ​

在vue-app.conf文件中，编写以下Nginx配置：

nginx
server {
    listen 80;
    server_name example.com; # 替换为您的域名或IP地址
    root /path/to/your/dist; # Vue项目构建后的输出目录
    index index.html;
    location / {
        try_files $uri $uri/ /index.html; # 用于SPA路由
    }
}

请确保将/path/to/your/dist替换为您的Vue项目构建输出的实际路径。

检查Nginx配置： ​

在重新加载Nginx之前，检查您的配置文件是否有语法错误：

bash
sudo nginx -t

重新加载Nginx： ​

如果配置检查无误，重新加载Nginx以应用新的配置：

bash
sudo systemctl reload nginx

访问您的Vue应用： ​

在浏览器中访问您的域名或IP地址，您应该能够看到您的Vue应用。 请注意，如果您的Vue应用使用了历史模式路由（mode: 'history'），上述配置中的try_files指令是必要的，它确保所有请求都返回index.html，允许Vue Router在客户端处理路由。如果您使用的是哈希模式路由（mode: 'hash'），则可能不需要此配置。

上次更新于: