vue打包后nginx反向代理
心烦的说说
主要讲解vue cli2.0和vue cli3.0代理需要主要的问题
⼀、需要下载nginx
1、下载地址 /en/download.html
选择稳定版本下载即可。下载完成⽬录如下
需要注意的是在本地测试nginx的话不能把nginx⽂件夹放在中⽂⽬录下。
⼆、配置打包出⼝路径
vue cli2.0代理配置
1、在cli2.0中项⽬中代理配置中主要集中在config⽂件中,找到config下⾯的index.js⽂件。代理直接找到对应dev下⾯的proxyTable,具体配置就不做详细讲解了。废话少说,直接找到build相关配置
build:{
// Template for index.html成功无捷径
index: solve(__dirname,'../dist/index.html'),
// Paths
astsRoot: solve(__dirname,'../dist'),
astsSubDirectory:'static',
astsPublicPath:'../../',//这⼀块地址给改为 ../../,路径不对静态资源就找不到
/**
* Source Maps
*/
productionSourceMap:fal,
devtool:'#source-map',
productionGzip:fal,
productionGzipExtensions:['js','css'],
bundleAnalyzerReport: v.npm_config_report
}
在⽣产环境下API_ROOT后⾯填写⽣产地址,地址后⾯的/api后期需要在nginx中做代理。
剩下的就直接执⾏ npm run build打包就⾏。
vue cli3.0注意事项
vue cli3.0⽤ publicPath替换了baURl,如果继续使⽤baUrl,会报警告,⼤号的包不能⽤。直接 publicPath = ‘/’,即项⽬中的静态资源路径直接对应的是项⽬根⽬录下的位置。然后 npm run build打包.
三、配置nginx
第⼀步、nginx⽬录已经展⽰过了就不多说,找到nginx⽬录,把dist⽬录下⽅的所有⽂件直接复制到 nginx下⾯的html⽂件夹中,原先⽂件下的⽂件全部删除。第⼆步、打开conf,找到f⽂件。
#ur nobody;
worker_process 1;
#error_log logs/error.log;
声音训练#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include pes;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_ur [$time_local] "$request" '
# '$status $body_bytes_nt "$http_referer" '
# '"$http_ur_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
ndfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
rver {
listen 3000;//端⼝
rver_name localhost;//访问的地址,可以线上的亦可以是本地环境的
#chart koi8-r;
#access_log logs/host.access.log main;
location /{
root html/dist;//root为⽣产环境的⼊⼝,
index index.html index.htm;//⾸页
try_files $uri $uri//index.html;#需要指向下⾯的@router否则会出现vue的路由在nginx中刷新出现404
error_page 404/index.html;//这⼀块同样需要配置,当页⾯刷新404时重新指向⾸页,记录当前的访问地址,不设置这⼀项nginx刷新会显⽰404 }
//api为后端代理的地址
location /api {
proxy_pass 10.0.88.150:12701;//后端接⼝地址
}
#error_page 404/404.html;
# redirect rver error pages to the static page /50x.html
#
error_page 500502503504/50x.html;
location =/50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
23个声母图片# proxy_pass 127.0.0.1;
#}
# pass the PHP scripts to FastCGI rver listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME/scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files,if Apache's document root
# concurs with nginx's one
#
#location ~/\.ht {
# deny all;
#}
}
# another virtual host using mix of IP-, name-, and port-bad configuration
#
#rver {
# listen 8000;
# listen somename:8080;
# rver_name somename alias another.alias;
# location /{
# root html;
# index index.html index.htm;
# }
#}
# HTTPS rver
#
#rver {
# listen 443 ssl;不紧不慢的意思
# rver_name localhost;
# ssl_certificate cert.pem;
不知疲倦的意思# ssl_certificate_key cert.key;
# ssl_ssion_cache shared:SSL:1m;
# ssl_ssion_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_rver_ciphers on;
# location /{
# root html;
# index index.html index.htm;
# }
#}
}
上⾯⽂件是我配好的nginx.
1、找到 rver模块,listen默认监听80端⼝,我这⾥改成了3000.。
拔丝茄子2、rver_name是监听的地址,我是本地测试所以改成localhost;
3、找到location / 模块
location /{
root html;//上⾯说到把dist包的内容都放到html⽂件下,root就是项⽬⼊⼝,这⾥我们把html⽂件当成⼊⼝,本地测试的时候也可以写成项⽬dist的地址,例如 C:\中科院项⽬\Tsk创新推⼴\tsk_promote\dist
index index.html index.htm;
try_files $uri $uri//index.html;//这⼀⾏代码的作⽤是⽤来保存地址信息,就⽐如vue history模式打包的项⽬放在服务器上⼀刷新地址就没了,加这个就是保存地址信息。
}
4、下⾯就是重头戏了,配置我们的代理
location /api {//viewt 就是后端项⽬中配置代理的部分,类似于前端的/api,这⾥我们采⽤后端所有接⼝中公共前缀 /viewt做代理
proxy_pass 10.0.88.150:12701;
}
这样我们的代理就配置好了,双击,命令⾏⼀闪⽽过,打开浏览器访问localhost:3000就可以看到我们的项⽬了。假如我们的项⽬有多个代理的话同样原理按照上⾯的⽅式配置就⾏。
5、加⼊⼀个nginx配置了两个前端项⽬的话需要⽤alias.
location /ProductCenter {
alias html/dist; #应⽤1打包⽂件所在路径
index index.html index.htm;
}
location /ProfileCenter {
alias html/dist2; #应⽤2打包⽂件所在路径
index index.html index.htm;
}
proxy_pass 转发的地址就是项⽬中配置的后台代理地址
四、nginx常⽤命令
windows下常⽤Nginx命令⾏(cd进⼊Nginx所在路径后使⽤):
start nginx //启动nginx
nginx -s reload //重载配置
nginx -s stop //快速停⽌
nginx -s quit //完整有序停⽌
Linux下常⽤Nginx命令⾏(cd进⼊Nginx所在路径后使⽤):
./nginx //启动nginx
./nginx -s reload //重载配置
粗心./nginx -s stop //快速停⽌
./nginx -s quit //完整有序停⽌