1.修改 router/index.js 添加一行 base: 'admin', 2.然后修改 config/index.js 增加一行 const assetsPublicPath = '/admin/' 然后修改 下面两处  assetsPublicPath 的值为定义的变量 3.部署时,通过NGINX的反向代理 首先,给需要部署的项目定义一个 NGINX 的 server server { listen ; location / { # vue h5 history mode 时配置 tr…

最近在做项目,需要把项目部署在域名下的二级目录,并且是在用vue-router的history 模式. 我们都知道vue-router 的两种前端基本访问模式 hash 和history .hash 模式后面带#,打包的时候只需要把绝对路径(/)换成相对对路径(./),就可以部署在任何地方,不需要服务器配合,但是不好看,所以我们一般选择history 模式,但是history 模式需要配合服务器的部署. 本文主要是在vue-cli3版本下,对部署在域名的二级目录下做四处的配置: 1. vue-r…

背景 首先这标题有点绕,我先解释下: 首先我们有静态服务器,上面某个目录有Vue路由history模式打包的应用程序(也就是build后的产物): 但是静态服务器一般不做对外域名用的,我们需要在k8s nginx-ingress上做下域名二级目录代理,转发到该静态目录: 这就是本文的背景,相信也是很多开发/运维同学的需求: 由上: #我们静态服务目录是,/cso/ https://static.chinacloudapi.cn/cso/ #静态服务下文件的url是 https://static.…

一.根据官方建议,dist打包的项目文件放在服务器根目录下,但是很多时候,我们并不能这样做,当涉及到二级目录设置多层深埋的时候,就需要在webpack配置文件里去设置一下了. 在webpack.config.js(config—>index.js)文件里设置: build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.res…

本文主要记录如何配置vue的打包文件配置项,使打包后的文件可以支持二级目录的访问. 1.常规打包 在实际的项目中,我们通常都使用 npm run build 直接打包文件后丢到服务器上访问 打包后的文件目录是这样的: 访问的静态资源都是地址是这样的: 我们现在要放在服务器的二级目录下访问地址,那么访问的路径就应该也加上二级目录,该如何配置尼? 2.静态文件地址修改 静态文件的访问地址应该加上二级目录前缀: 方法:找到项目的打包配置文件index.js,对参数assetsPublicPath进行配…

Vue项目部署问题及解决方案 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.example/#/hello,hash 的值为 #/hello.特点:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端不会产生什么影响,改变 URL 不会重载页面. history:利用了 HTML5 History Interface 中新增的 pushState() 和 repl…

写在前面 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.example/#/hello,hash 的值为 #/hello.特点:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端不会产生什么影响,改变 URL 不会重载页面. history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState()…

   当配置Nginx来映射不同的服务器 可以通过二级路径来反向代理 来解决一个外网端口实现多个服务访问. 配置如下: server { listen ; server_name demo.domain.com; #通过访问service二级目录来访问后台 location /service/ { #DemoBackend1后面的斜杠是一个关键,没有斜杠的话就会传递service到后端节点导致404 proxy_pass http://backend1/; proxy_redirect off;…

场景描述: 通过二级目录(虚拟目录,应用程序)的方式访问同一ip+端口的不同应用,例如location是用户使用页面,location/admin/是管理页面,location部署在192.168.1.100的80端口,location/admin部署在172.20.1.32的8080端口上. 解决方案: 使用nginx反向代理,配置如下: server { listen 80; server_name demo.domain.com; #通过访问service二级目录来访问后台 locatio…

前文:用jquery实现文章自动生成二级目录. 使用方法的补充 我们可以把我们的js和css上传到博客园,然后在页面HTML代码中使用他们. 发现的一些问题 在我把我的js放到自己的博客园上运行之后发现了几个问题: 博客园博客的子标题用的是h2,自动生成目录的js把博客的子标题也加入到了目录中. 写了一篇比较长的博客,发现用目录跳到某处后没有链接返回目录处,有些不方便. 每次写完文章还得在文章的HTML中加目录的div. 解决问题 参考:薰衣草的旋律的一篇文章. 博客园子标题的问题,只要把一级标…