Linux部署Vue項目

Vue是一種前端框架，通過將代碼封裝至組件中實現管理，具有流行、易學、靈活等特點，受到越來越多前端開發人員的青睞。而在部署Vue項目時，由於其中包含了較多複雜的依賴，需要進行一定的配置。本文將從多個方面對如何在Linux服務器上部署Vue項目進行詳細的闡述，其中包括：

一、Linux部署Vue項目

在Linux服務器上安裝npm、nodejs

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

安裝Vue-cli

sudo npm install -g vue-cli

創建Vue項目

vue init webpack my-project

安裝相關依賴並啟動項目

cd my-project
npm install
npm run dev

至此，基本的Vue項目已經創建並可啟動運行。

二、Linux部署Vue項目報函數錯誤

在啟動Vue項目時，如果出現錯誤 “Unexpected token function” ，則是node版本不符合要求，需要安裝新版node。

nvm install v6.9.1
nvm use v6.9.1

三、Linux部署Vue項目Nginx Jar包

在Linux服務器上，可通過Nginx來部署Vue項目。

安裝Nginx

sudo apt-get install nginx

修改nginx配置文件

sudo vi /etc/nginx/nginx.conf

在http{}中添加：

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /var/www/;
        index  index.html;
    }

    location ~/api/ {
        proxy_pass http://localhost:8080/;
    }
}

重啟Nginx

sudo service nginx restart

啟動Vue項目，並將其打包

npm run build

將打包後的dist文件夾拷貝至Nginx網站目錄的var/www/下，啟動Nginx，即可訪問Vue項目。

四、Linux部署Vue項目不需要nodejs

通過使用部署工具pm2，可實現無需安裝nodejs，即可部署Vue項目。

安裝pm2

sudo npm install -g pm2

啟動Vue項目

cd my-project
pm2 start npm --name "VueProject" -- run start

至此，Vue項目已經成功啟動。

五、Linux部署Vue項目訪問不了

在Nginx配置文件中添加以下代碼，即可解決Vue項目訪問不了的問題。

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

六、Linux部署Vue項目前端樣式錯位

在Nginx配置文件中添加以下代碼，即可解決Vue項目前端樣式錯位問題。

location ~* \.(eot|ttf|woff|svg|gif|png|jpg|jpeg|css|js)$ {
    root /var/www;
    expires 1d;
    add_header Cache-Control public;
    add_header Pragma public;
    add_header Vary Accept-Encoding;
    if (-f $request_filename) {
        break;
    }
    rewrite (.*) /index.html last;
}

七、Linux部署Vue項目Nginx

在Linux服務器上，通過Nginx來部署Vue項目，可以使得訪問更加快速。

安裝Nginx

sudo apt-get install nginx

在Nginx配置文件中添加以下代碼：

upstream node_server {
    server 127.0.0.1:8080;
}

server {
    listen 80;
    server_name localhost;

    # access log path
    access_log /var/log/nginx/vue_proxy.access.log;
    # error log path
    error_log /var/log/nginx/vue_proxy.error.log;

    location / {
        root /var/www/vue;
        index index.html;
        try_files $uri $uri/ /index.html;

        # enable browser cache
        expires 1d;
        add_header Cache-Control public;
        add_header Pragma public;
        add_header Vary Accept-Encoding;
    }

    location /api {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
        add_header 'Access-Control-Allow-Headers' 'X-Requested-With, Accept, Content-Type, Origin';
        proxy_pass http://node_server/;
        proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

使用以下命令重啟Nginx

sudo nginx -s reload

八、Linux部署項目

總的來說，在Linux服務器上，對於Vue項目的部署主要包括以下步驟：

安裝npm、nodejs
安裝Vue-cli
創建Vue項目
啟動Vue項目
打包Vue項目
使用Nginx部署Vue項目
使用pm2部署Vue項目

九、Linux部署web項目

除了Vue項目，每種web應用的部署也有不同的方式，下面是一個通用的web項目部署流程：

安裝服務器
安裝Web服務器
安裝編程語言環境
安裝數據庫
設置Web服務環境
編寫Web應用程序並測試
配置Web服務器
配置防火牆
啟動服務

在Vue項目的部署中，需要關注的地方主要是打包、Nginx部署和pm2部署等幾個方面。

原創文章，作者：YZUG，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/132521.html