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项目的部署主要包括以下步骤：

1. 安装npm、nodejs
2. 安装Vue-cli
3. 创建Vue项目
4. 启动Vue项目
5. 打包Vue项目
6. 使用Nginx部署Vue项目
7. 使用pm2部署Vue项目

九、Linux部署web项目

除了Vue项目，每种web应用的部署也有不同的方式，下面是一个通用的web项目部署流程：

1. 安装服务器
2. 安装Web服务器
3. 安装编程语言环境
4. 安装数据库
5. 设置Web服务环境
6. 编写Web应用程序并测试
7. 配置Web服务器
8. 配置防火墙
9. 启动服务

在Vue项目的部署中，需要关注的地方主要是打包、Nginx部署和pm2部署等几个方面。