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