Vue項目部署之從本地到線上環(huán)境實踐

更新時間：2026年02月10日 15:05:12 作者：fyakm

文章詳細介紹了如何將Vue項目從本地環(huán)境部署到線上服務(wù)器,包括打包本地項目、服務(wù)器環(huán)境搭建、項目上傳與配置以及解決部署后頁面訪問異常問題

本地項目的打包

本地項目打包是部署的第一步，它將我們開發(fā)的Vue項目轉(zhuǎn)換為可以在服務(wù)器上運行的靜態(tài)文件。

打包前的準(zhǔn)備

在進行打包之前，我們需要確保項目的配置是正確的。

首先，檢查vue.config.js文件，這個文件包含了項目的一些配置信息，比如打包輸出的目錄、公共路徑等。

例如，如果我們希望打包后的文件存放在dist目錄下，可以這樣配置：

module.exports = {
  outputDir: 'dist',
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/'
}

這里的outputDir指定了打包輸出的目錄，publicPath根據(jù)環(huán)境變量來設(shè)置公共路徑，在生產(chǎn)環(huán)境下使用相對路徑，這樣可以避免一些路徑問題。

執(zhí)行打包命令

在項目根目錄下，打開終端，執(zhí)行以下命令進行打包：

npm run build

這個命令會調(diào)用package.json文件中配置的build腳本，通常是vue-cli-service build。

執(zhí)行這個命令后，Vue CLI會對項目進行編譯、壓縮等操作，最終生成一個dist目錄，里面包含了打包后的靜態(tài)文件，如HTML、CSS、JavaScript等。

打包過程中的注意事項

在打包過程中，可能會遇到一些問題。比如，如果項目中使用了一些第三方庫，可能會導(dǎo)致打包后的文件體積過大。這時，我們可以使用一些工具來進行優(yōu)化，比如webpack-bundle-analyzer。

安裝這個工具后，在vue.config.js中進行配置：

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  }
}

再次執(zhí)行打包命令，會在瀏覽器中打開一個可視化界面，展示各個模塊的大小，幫助我們找出體積過大的模塊，進行優(yōu)化。

線上服務(wù)器的部署流程

完成本地項目打包后，接下來就是將項目部署到線上服務(wù)器。

這個過程主要包括服務(wù)器環(huán)境搭建和項目上傳與配置。

服務(wù)器環(huán)境搭建

首先，我們需要選擇一個合適的服務(wù)器。常見的服務(wù)器有阿里云、騰訊云等。選擇好服務(wù)器后，我們需要安裝一些必要的軟件，如Nginx或Apache，它們可以作為Web服務(wù)器來托管我們的項目。

以Nginx為例，在Ubuntu系統(tǒng)上安裝Nginx可以使用以下命令：

sudo apt update
sudo apt install nginx

安裝完成后，啟動Nginx服務(wù)：

sudo systemctl start nginx

可以通過訪問服務(wù)器的IP地址來驗證Nginx是否安裝成功，如果看到Nginx的歡迎頁面，說明安裝成功。

項目上傳和配置

將本地打包好的dist目錄上傳到服務(wù)器?？梢允褂?code>scp命令進行上傳，例如：

scp -r dist user@server_ip:/path/to/destination

這里的user是服務(wù)器的用戶名，server_ip是服務(wù)器的IP地址，/path/to/destination是上傳的目標(biāo)路徑。

上傳完成后，需要配置Nginx來指向我們上傳的項目。

打開Nginx的配置文件，通常在/etc/nginx/sites-available/default，修改配置如下：

server {
    listen 80;
    server_name your_domain_or_ip;

    root /path/to/destination/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

這里的server_name可以是服務(wù)器的域名或IP地址，root指定了項目的根目錄，index指定了默認的首頁。

try_files指令用于處理路由問題，確保單頁面應(yīng)用的路由正常工作。

修改完配置文件后，重啟Nginx服務(wù)：

sudo systemctl restart nginx

解決部署后頁面訪問異常的問題

在部署完成后，可能會遇到頁面訪問異常的問題。常見的問題及解決方法如下：

404錯誤

如果訪問頁面時出現(xiàn)404錯誤，可能是Nginx配置的路徑不正確，或者文件上傳不完整。

檢查Nginx配置文件中的root路徑是否正確，確保上傳的文件完整。

白屏問題

白屏問題可能是由于靜態(tài)資源加載失敗導(dǎo)致的。

檢查vue.config.js中的publicPath配置是否正確，確保靜態(tài)資源的路徑是正確的。

跨域問題

如果項目中涉及到跨域請求，可能會導(dǎo)致請求失敗。

可以在Nginx配置中添加跨域請求的支持，例如：

location /api {
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

    if ($request_method = 'OPTIONS') {
        return 204;
    }

    proxy_pass http://backend_server;
}

這里的/api是需要跨域請求的接口路徑，backend_server是后端服務(wù)器的地址。