我们常使用前后端分离项目时,会需要将前端vue打包然后部署。

vue项目其实可以直接通过一下语句进行打包：

npmrunbuild

默认打包情况如下:

当我们需要将打包名称以及静态资源位置进行修改时便需要进行相应的配置:

1.首先在项目根目录下创建vue.config.js文件

配置内容如下所示(附带跨域问题解决):

publicPath:'https://www.fruan.com/post/',

outputDir:'test',//打包输出目录

assetsDir:'https://www.fruan.com/post/static',//放置生成的静态资源

filenameHashing:true,//生成的静态资源在它们的文件名中包含了hash以便更好的控制缓存

lintOnSave:false,//设置是否在开发环境下每次保存代码时都启用eslint验证

productionSourceMap:false,//打包时不生成.map文件

devServer:{//记住，别写错了devServer//设置本地默认端口选填

proxy:{//设置代理，必须填

'/api':{//设置拦截器拦截器格式斜杠+拦截器名字，名字可以自己定

target:'http://localhost:9090',//代理的目标地址(后端设置的端口号)

changeOrigin:true,//是否设置同源，输入是的

'/api':''//选择忽略拦截器里面的单词

}

2.查看路由中(router/index.js)是否使用history,是的话修改为hash。或者将mode直接注掉，因为默认使用hash。

constrouter=newVueRouter({

exportdefaultrouter

然后再次使用npmrunbuild进行打包就会出现test文件夹,已经其中静态文件会放置到static中。

双击打包好的index.html文件,就可以看到是首页了。

首先需要安装nignx,这个毋庸置疑这里就不介绍。(或者后续会在nginx板块放置具体安装步骤)

直接在nginx.conf中进行配置即可:

indexindex.shtmlindex.htmlindex.htm;

#error_loglogs/error.log;

#error_loglogs/error.lognotice;

#error_loglogs/error.loginfo;

default_typeapplication/octet-stream;

#log_formatmain'$remote_addr-$remote_user[$time_local]"$request"'

#'$status$body_bytes_sent"$http_referer"'

#access_loglogs/access.logmain;

#这里代表代理的项目端口为127.0.0.1:8111端口(weight等配置自行查询)

server127.0.0.1:8111weight=5max_fails=3fail_timeout=20s;

listen8096;#nginx使用8096

server_namelocalhost;#服务名称

rootD:\BDWorkParce3\LPT_MENHU\wwwroot_release;#根目录

indexindex.shtmlindex.htmlindex.htm;#设置默认页

#访问localhost:8096/qgxzzfzhgljdpt会打开D:\BDWorkParce3\LPT_MENHU\wwwroot_release\qgxzzfzhgljdpt下级中的index.shtml/index.html/index.htm默认页

location~.*.(svn|Git|git){

error_page500502503504/50x.html;

配置用户或者组，默认为nobodynobody。

允许生成的进程数，默认为1

指定nginx进程运行文件存放地址

error_loglog/error.logdebug;#制定日志路径，级别。这个设置可以放入全局块，http块，server块，级别以此为：debug|info|notice|warn|error|crit|alert|emerg

accept_mutexon;#设置网路连接序列化，防止惊群现象发生，默认为on

multi_accepton;#设置一个进程是否同时接受多个网络连接，默认为off

事件驱动模型，select|poll|kqueue|epoll|resig|/dev/poll|eventport

worker_connections1024;#最大连接数，默认为512

includemime.types;#文件扩展名与文件类型映射表

default_typeapplication/octet-stream;#默认文件类型，默认为text/plain

log_formatmyFormat'$remote_addr–$remote_user[$time_local]$request$status$body_bytes_sent$http_referer$http_user_agent$http_x_forwarded_for';#自定义格式

access_loglog/access.logmyFormat;#combined为日志格式的默认值

sendfileon;#允许sendfile方式传输文件，默认为off，可以在http块，server块，location块。

sendfile_max_chunk100k;#每个进程每次调用传输数量不能大于设定的值，默认为0，即不设上限。

keepalive_timeout65;#连接超时时间，默认为75s，可以在http，server，location块。

server192.168.10.121:3333backup;#热备

error_page404https://www.baidu.com;#错误页

keepalive_requests120;#单连接请求上限次数。

server_name127.0.0.1;#监听地址

location~*^.+${#请求的url过滤，正则匹配，~为区分大小写，~*为不区分大小写。

proxy_passhttp://mysvr;#请求转向mysvr定义的服务器列表

allow172.18.5.54;#允许的ip

}

然后启动或者重启nginx即可。

访问:服务器地址:8021/test即可。

以上就是Vue项目打包并部署nginx服务器的方法的详细内容，更多请关注主机测评网其它相关文章！