vue打包后nginx反向代理

更新时间:2023-05-29 05:37:46 阅读: 评论:0

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 //完整有序停⽌

本文发布于:2023-05-29 05:37:46,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/945188.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:地址   代理   配置   下载   刷新   路径
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图