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/n/132521.html