Linux+Nginx部署Vue项目（dist文件）

Linux+Nginx部署Vue项目（dist文件）

项目场景：

项目场景：Linux部署Vue项目

---

思路：

1.将Vue项目打包成dist包
2.将dist包上传到服务器
3.安装Nginx
4.配置Nginx[nginx.conf]
5.重启Nginx

---

操作：

1.1 打包dist文件：

【打包时遇到的问题】：
【现象】：

> node build/build.js

\ building for production...Error processing file: static/css/app.2940221cd4f03574745dfe3474e795cf.css
(node:53520) UnhandledPromiseRejectionWarning: CssSyntaxError: E:\Work\frontend\static\css\app.2940221cd4f03574745dfe3474e795cf.css:2255:6: Unknown word
    at Input.error (E:\Work\frontend\node_modules\_postcss@7.0.36@postcss\lib\input.js:128:16)
    at Parser.unknownWord (E:\Work\frontend\node_modules\_postcss@7.0.36@postcss\lib\parser.js:561:22)
    at Parser.decl (E:\Work\frontend\node_modules\_postcss@7.0.36@postcss\lib\parser.js:233:16)

• 【说明】：
• a.通过错误信息可以了解到错误主要在构建css文件时错误
• b.该错误只在npm run build 命令打包时报错，npm run dev 是没有问题的。

【原因】：由于引入了第三方的css
【参考】:https://www.cnblogs.com/wjhsmart/p/13563239.html

【解决方案】：
a.找到 build 目录下面的 utils.js 文件
b.找到 cssLoader 配置，加上以下画红线的代码：minimize: true

c.再次运行 npm run build
【注】：css-loader和postcss-loader

【原理】：将CSS样式进行压缩
【参考】:https://www.cnblogs.com/wjhsmart/p/13563239.html

---

1.2 压缩dist文件：

• 【说明】：npm run build 打好的包是文件夹形式，需要进行压缩。
• 【说明】：打好的包如图所示：找到文件位置进行压缩。
  

1.3 将dist包上传到服务器：

【上传时遇到的问题】：
【现象】：
上传时压缩包总上传不上
【原因】：
服务器上组占满
【查看命令】：

df -h

【说明】：linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况，-h 方便阅读方式显示。

1.4 安装Nginx：

【注】：在安装nginx前首先要确认系统中安装了gcc、pcre-devel、zlib-devel、openssl-devel
【安装命令】：

yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

【版本】：
a.linux版本：CentOS7 64位
b.nginx：1.9.9

nginx下载地址：https://nginx.org/download/
【操作】：下载“nginx-1.9.9.tar.gz”，移动到/usr/local/下
【解压】：

## 解压
tar -zxvf nginx-1.9.9.tar.gz

##进入nginx目录
cd nginx-1.9.9
## 配置./configure --prefix=/usr/local/nginx# makemakemake install

执行make、make install命令
【测试】：测试是否安装成功

# cd到刚才配置的安装目录/usr/loca/nginx/
./sbin/nginx -t

【错误信息】:

nginx: [alert] could not open error log file: open() "/usr/local/nginx/logs/error.log" failed (2: No such file or directory)
2016/09/13 19:08:56 [emerg] 6996#0: open() "/usr/local/nginx/logs/access.log" failed (2: No such file or directory)

【原因分析】：nginx/目录下没有logs文件夹
【解决方法】:

mkdir logs
chmod 700 logs

【输出】：

nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful

【启动nginx 】：

cd /usr/local/nginx/sbin
./nginx //启动nginx

【测试80端口-查看80端口】：no：代表没开80端口

firewall-cmd --query-port=80/tcp

【开启80端口】：–permanent #永久生效，没有此参数重启后失效

firewall-cmd --add-port=80/tcp --permanent
#重启防火墙
systemctl restart firewalld

【刷新】：显示Welcome to Nginx即表示成功！

【配置Nginx开机启动】

vim /etc/rc.d/rc.local

【参考】：https://www.cnblogs.com/xxoome/p/5866475.html

1.5配置Nginx[nginx.conf]

server {
        listen       8083;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        location / {
            root  /daping/lhl/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /api{
             rewrite  ^/api/(.*)$ /$1 break;
             proxy_pass http://localhost:9092;
        }
    }

• 【说明】：
• a.listen:表示监听的端口[前端打包的启动端口]
  

• 【说明】：
• a.server_name:表示服务名称[若多个同名的将按照优先级进行运行]

location / {
            root  /daping/lhl/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

• 【说明】：
• a.location中的root代表dist解压后的文件放在哪里面
• b.index表示dist文件包中的index.html文件

• 【原理】：
• a.Nginx和Tomcat原理相同，都是加载dist文件中的index.html
• b.以index.html为入口进入

1.6重启Nginx

1.进入nginx安装目录sbin下，输入命令./nginx -t
2.看到如下显示nginx.conf syntax is ok

nginx.conf test is successful
说明配置文件正确！

【重启】:进入nginx可执行目录sbin下，输入命令./nginx -s reload 即可

1.7访问

【说明】：直接访问：IP：8083即可

【参考】：https://www.cnblogs.com/wangcp-2014/p/9922845.html