打包前端项目

以我自己的项目为例子

1. 在项目根路径下的vue.config.js里面配置部署应用包时的基本URLpublicPath，不配置的话默认是publickPath:"/"；

module.exports={publicPath:"/",};

为了统一vue-router路由的base和publickPath，可以这样写：

constrouter=newVueRouter({mode:'history',base:process.env.BASE_URL,routes})

打包完前端项目后需要将要打包好的dist里面的文件放到服务器上，然后再配置nginx

在服务器上（linux系统）配置nginx

因为我的项目用的是腾讯云服务器(centos6.5)，所以我就以这个举例子了

下载安装nginx

参考：www.runoob.com/linux/nginx…

1. 安装编译工具及文库

yum-yinstallmakezlibzlib-develgcc-clibtoolopensslopenssl-devel

先要安装PCREPCRE作用是让Nginx支持Rewrite功能。

[root@bogonsrc]#cd/usr/local/src/[root@bogonsrc]#wgethttp://downloads.sourceforge.net/project/pcre/pcre/8.35/pcre-8.35.tar.gz

解压安装包

[root@bogonsrc]#tarzxvfpcre-8.35.tar.gz

进入安装目录编译安装

[root@bogonsrc]#cdpcre-8.35[root@bogonpcre-8.35]#./configure[root@bogonpcre-8.35]#make&&makeinstall

查看pcre版本

[root@bogonpcre-8.35]#pcre-config--version

下载、编译安装nginx

[root@bogonsrc]#cd/usr/local/src/[root@bogonsrc]#wgethttp://nginx.org/download/nginx-1.18.0.tar.gz

解压安装包

[root@bogonsrc]#tarzxvfnginx-1.18.0.tar.gz

进入安装目录

[root@bogonsrc]#cdnginx-1.18.0

编译安装

[root@bogonnginx-1.18.0]#./configure--prefix=/usr/local/webserver/nginx--with-http_stub_status_module--with-http_ssl_module--with-pcre=/usr/local/src/pcre-8.35[root@bogonnginx-1.18.0]#make[root@bogonnginx-1.18.0]#makeinstall

查看nginx版本，看是否安装成功

[root@bogonnginx-1.18.0]#/usr/local/webserver/nginx/sbin/nginx-v

安装成功！！！

配置nginx、设置云服务器

1. 配置nginx将打包好的前端项目放到nginx安装目录（/usr/local/webserver/nginx）=>html下，然后找到nginx安装目录=>conf=>nginx.conf,编辑nginx.conf文件vinginx.conf
   把这段替换成这样：

改成这样：

location/{indexindex.htmlindex.htm;try_files$uri$uri//index.html;}

保存文件:wq

注意：SPA是一种网络应用程序或网站的模型，所有用户交互是通过动态重写当前页面，不管我们应用有多少页面，构建物都只会产出一个index.html，当我们进入到子路由时刷新页面，web容器没有相对应的页面此时会出现404，

解决办法：只需要配置将任意页面都重定向到index.html，把路由交由前端处理，对nginx配置文件.conf修改，添加try_files$uri$uri//index.html;

所以如果前端项目路由用的是history模式，如果用默认配置可能会刷新页面404的问题详情可以参考：vue3js.cn/interview/v…

vue-cli官方文档:cli.vuejs.org/zh/config/#…

启动nginx

/usr/local/webserver/nginx/sbin/nginx

设置云服务器安全组规则开放入口找到云服务器控制台安全组配置规则点击一键放通

关闭防火墙：chkconfigiptablesoff

输入公网id地址查看成果

到这一步就大功告成了！！！

常用命令/usr/local/webserver/nginx/sbin/nginx-sreload#重新载入配置文件/usr/local/webserver/nginx/sbin/nginx-sreopen#重启Nginx/usr/local/webserver/nginx/sbin/nginx-sstop#停止Nginxchkconfigiptablesoff#关闭防火墙/usr/local/webserver/nginx/sbin/nginx-t#检查配置文件nginx.conf的命令写在最后

我是AndyHu，目前暂时是一枚前端搬砖工程师。

文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注

让灵魂控制自己的皮囊才是真正的自由！！！