快捷導(dǎo)航

nginx部署前端vue項(xiàng)目教程

更新時間：2025年09月05日 11:20:24 作者：Qpeterqiufengyi

要在Nginx上部署前端Vue項(xiàng)目,首先在Vue項(xiàng)目根目錄構(gòu)建,將構(gòu)建文件上傳至服務(wù)器,并在Nginx配置文件中配置publicPath為/,以確保靜態(tài)文件正確引用,接著編輯Nginx配置文件,設(shè)置相應(yīng)路徑和反向代理等配置,保存后重啟Nginx服務(wù)

一、部署

要在Nginx上部署前端Vue項(xiàng)目，你需要將構(gòu)建好的Vue項(xiàng)目文件放置在Nginx服務(wù)器的某個目錄下，并配置Nginx的配置文件來正確地提供這些靜態(tài)文件。

以下是部署Vue項(xiàng)目的基本步驟：

1.在你的Vue項(xiàng)目根目錄中運(yùn)行構(gòu)建命令：

npm run build

或者如果你使用的是Yarn：

yarn build

2.將構(gòu)建后的內(nèi)容（通常在dist目錄）上傳到你的服務(wù)器。

3.配置Nginx。編輯Nginx的配置文件，通常位于/etc/nginx/nginx.conf或者/etc/nginx/sites-available/目錄下的某個文件。

假設(shè)你的Vue項(xiàng)目被構(gòu)建并且所有的文件都在/var/www/my-vue-app/dist目錄下，你可以使用以下配置：

server {
    listen 80;
    server_name your-domain.com;
 
    location / {
        root /var/www/my-vue-app/dist;
        try_files $uri $uri/ /index.html;
    }
}

4.重啟Nginx以應(yīng)用更改：

sudo systemctl restart nginx

確保你的Vue項(xiàng)目的publicPath在vue.config.js中設(shè)置為/，這樣打包的時候資源引用才會正確。

如果你的Vue項(xiàng)目需要運(yùn)行在非根路徑下，你需要調(diào)整publicPath并相應(yīng)地調(diào)整Nginx配置中的路徑。

二、配置

要使用nginx部署Vue工程，您需要進(jìn)行以下配置：

1. 安裝Nginx：首先確保您已經(jīng)在服務(wù)器上安裝了Nginx。如果沒有，請根據(jù)您的操作系統(tǒng)進(jìn)行安裝。

2. 配置Nginx：打開Nginx的配置文件，通常位于`/etc/nginx/nginx.conf`。添加以下配置：

server {
    listen 80;
    server_name your_domain.com; // 替換成您的域名或IP地址

    location / {
        root /path/to/your/vue/project/dist; // 替換成您Vue工程dist文件夾的路徑
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

3. 保存配置文件并重啟Nginx服務(wù)。