Linux+Nginx部署Vue项目(dist文件)

项目场景:

项目场景:Linux部署Vue项目

思路:

1\。将Vue项目打包成dist包

2\。上传 dist 包到服务器

3\。安装 Nginx

4\。配置 Nginx[nginx.conf]

5\。重启 Nginx

操作:

1.1包dist文件:

[打包过程中遇到的问题]:

[现象]:

> 节点构建/build.js

\ building for production...错误处理文件:static/css/app.2940221cd4f03574745dfe3474e795cf.css

(node:53520) UnhandledPromiseRejectionWarning: CssSyntaxError: E:\Work\frontend\static\css\app.2940221cd4f03574745dfe3474e795cf.css:2255:6: 未知字

在 Input.error (E:\Work\frontend\node\_modules\\_postcss@7.0.36@postcss\lib\input.js:128:16)

在 Parser.unknownWord (E:\Work\frontend\node_modules\_postcss@7.0.36@postcss\lib\parser.js:561:22)

在 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

[解决方案]:

一个。在 build 目录下找到 utils.js 文件

湾。找到cssLoader配置,添加以下红线标记的代码:minimize: true

C。再次运行 npm run build

[note]: CSS 加载器和 postcss 加载器

[原理]:压缩 CSS 样式

[参考]:https://www.cnblogs.com/wjhsmart/p/13563239.html

1.2 压缩dist文件:

• [注意]:npm run build包为文件夹形式,需要压缩。

• [说明]:打包后的包如图:找到文件位置,压缩。

1.3 上传dist包到服务器:

[上传过程中遇到的问题]:

[现象]:

上传时压缩包无法上传

[原因]:

服务器上的组已满

查看命令:

df -h

[说明]:df命令在linux中的作用是检查linux服务器文件系统的磁盘空间占用情况,-h便于阅读和显示。

1.4安装Nginx:

[注意]:在安装nginx之前,首先确认系统中安装了gcc、PCRE devel、zlib devel和OpenSSL devel

[安装命令]:

yum -y 安装 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 --prefixu003d/usr/local/nginx# makemakemake install

执行 make 和 make install 命令

[test]:测试是否安装成功

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

./sbin/nginx -t

[错误信息]:

nginx:[alert] 无法打开错误日志文件: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" 失败(2: 没有这样的文件或目录)

[原因分析]:nginx/目录下没有logs文件夹

[解决方案]:

mkdir 日志

chmod 700 日志

[输出]:

nginx:配置文件/usr/local/nginx/conf/nginx.conf 语法没问题

nginx:配置文件/usr/local/nginx/conf/nginx.conf 测试成功

[启动 nginx]:

cd /usr/local/nginx/sbin

./nginx //启动nginx

[test port 80 - view port 80]: no 表示80端口没有打开

防火墙-cmd --query-portu003d80/tcp

[open port 80]: – 永久#生效。无此参数重启后失效

防火墙-cmd --add-portu003d80/tcp --permanent

#service iptables 重启

systemctl 重启防火墙

[refresh]:显示 Welcome to Nginx 表示成功!

[配置Nginx启动]

vim /etc/rc.d/rc.local

[参考]:https://www.cnblogs.com/xxoome/p/5866475.html

1.5 配置Nginx[nginx.conf]

服务器{

听 8083;

服务器\名称本地主机;

#charset koi8-r;

#access_log 日志/host.access.log 主要;

位置 / {

根 /daping/lhl/dist;

索引 index.html index.htm;

尝试_files $uri $uri/ /index.html;

}

位置 /api{

重写 ^/api/(.*)$ /$1 中断;

代理_pass http://localhost:9092;

}

}

• [描述]:

• a.listen:表示监听端口[前端包的起始端口]

• [描述]:

• a.server_name:表示服务名[如果有多个同名则按照优先级运行]

位置 / {

根 /daping/lhl/dist;

索引 index.html index.htm;

尝试_files $uri $uri/ /index.html;

}

• [描述]:

• a.位置中的根代表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 语法没问题

nginx.conf 测试成功

配置文件正确!

[restart]:进入nginx可执行目录sbin,输入命令。 /nginx -s 重新加载

1.7访问

[描述]:直接访问:IP:8083

[参考]:https://www.cnblogs.com/wangcp-2014/p/9922845.html