Linux Nginx部署Vue项目(dist文件)项目场景：项目场景： Linux部署Vue项目构想：1.将Vue项目打包到dist包中
将dist软件包上传到服务器
安装Nginx
4.nginx配置[nginx.conf]
重新启动Nginx操作：打包1.1dist文件： 【打包时出现的问题】:
【现象】:
节点构建/构建. js buildingforproduction . errorprocessingfile : static/CSS/app.2940221 CD 4f 03574745 dfe 3474 e 795 cf.CSS (node 336053520 unhandledpromiserejectionwarning : CSS syntax error : e 33: ) app.2940221 CD 4f 03574745 dfe 3474 e 795 cf.CSS 336022533606336063360 unknownwordatinput.error (e : (工作(前端) nod input.js:128:16 ) atparser.unknown word (e : (work (frontend (node _ modules _ post CSS @ 7.7 parser.js 3333650 ) node_modules ) _ post css @7.0. 36 @ post parser.js :233:16 )【说明】: a .从错误信息中可以看出，错误主要是在构建CSS文件时发生的【原因】:由于引入了第三方css
【参考】:https://www.cn blogs.com/wjhsmart/p/13563239.html
【解决方案】:
找到build目录下的utils.js文件
找到CSS加载器配置，添加以下红线代码： minimize: true
重新运行NPM运行构建
【注】: css-loader和postcss-loader
【原理】:压缩CSS样式
【参考】:https://www.cn blogs.com/wjhsmart/p/13563239.html
1.2dist文件压缩： 【说明】: NPM运行构建创建的软件包是文件夹格式，需要压缩。 【说明】:制作的包如图所示。 找到并压缩文件的位置。
1.3将dist软件包上传到服务器【上传时出现的问题】:
【现象】:
上传时压缩包很难上传
【原因】:
服务器上的组已满
【显示指令】:
df -h【说明】: df命令在linux上的功能用于检查linux服务器上文件系统的磁盘空间占用情况，-h显示为便于阅读。
1.4Nginx安装：【注】:安装nginx之前，首先确保系统上安装了gcc、pcre-devel、zlib-devel和openssl-devel
【安装指令】:
yum-yinstallgccpcre-devel zlib-devel 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
make，运行make install命令
【测试】:测试安装是否成功
# cd转到刚才配置的安装目录/usr/loca/nginx/./sbin/nginx -t【错误信息】:
nginx : [ alert ] couldnotopenerrorlogfile : open ('/usr/local/nginx/logs/error.log ' failed ) 2: nosuccor usr/local/nginx/logs/access.log ' failed ) 2:nosuchfileor
【解决方法】:
mkdir logschmod 700 logs【输出】:
nginx 3360 theconfigurationfile/usr/local/nginx/conf/nginx.confsyntaxisoknginx :配置文件/usr/local
CD/usr/local/nginx/sbin./nginx//启动nginx【查看测试80端口-80端口】:否：表示80端口未打开
防火墙- cmd--查询端口=80/TCP【打开80端口】:permanent #永久有效，在没有此参数的情况下重新启动将禁用
防火墙- cmd-- -添加端口=80/TCP-- permanent #防火墙systemctl restart firewalld【刷新】: Welcome to Nginx成功
【设定Nginx的启动】
vim /etc/rc.d/rc.local
【参考】: https://www.cn blogs.com/xxoo me/p/5866475.html
1.5 nginx [ nginx.conf ] server { listen 8083； server_name localhost； #charset koi8-r； # access _ loglogs/host.access.log main； 位置/{ root/da ping/lhl/dist； 索引索引. html index.htm； try_files $uri $uri//index.html； }位置/API { rewrite ^/API/(.* ) $ /$1 break； proxy _ pass http://localhost :9092； }【说明】: a.listen:表示正在监听的端口[前端包启动端口]
【说明】: a.server_name:表示服务名称[如果有多个名称相同，则按照优先级运行] location/{ root/da ping/lhl/dist； 索引索引. html index.htm； try_files $uri $uri//index.html； (说明):a.location的root表示磁盘解压缩后的文件位于何处。 b.index表示dist软件包的index.html文件。 原理(a.Nginx与Tomcat原理相同，即加载到dist文件中的index.htmlb.)
nginx.conf syntax is ok如下所示
nginx.conf test is successful帮助的配置文件是正确的。
【重新启动】进入：nginx可执行目录sbin下，输入命令./nginx -s reload即可
1.7访问【说明】:直接访问： IP:8083即可
【参考】: https://www.cn blogs.com/wangcp-2014/p/9922845.html