有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue process.env.base_url(vue项目打包后,放到二级目录无法访问)解决方案

vue 炮渣日记 2周前 (11-23) 19次浏览 已收录 0个评论 扫描二维码

一、背景

  • 实现多个Vue子项目合并发布到同一个nginx
  • 每个子项目一个目录

二、现象

  • 项目在开发环境中正常运行
  • 打包上传到nginx根目录的下一级,就会出现问题

三、解决

这个问题是由于Vue是从nginx的根目录开始查找组件导致的。所以需要修改路由的查找起点。直接上代码了

  • 1、重新指定路由的base url , base: process.env.BASE_URL, 其中 BASE_URL 是自定义的路径. 下面是router目录下的index.js 中的关键代码: route.js
const router = new VueRouter({
  base: process.env.BASE_URL,  // 注意这里的配置,BASE_URL会在后面定义
  mode: "history",
  routes
})

2、定义 BASE_URL

vue.config.js 关键代码

const path = require('path')
//1、-----------注意这里:BASE_URL 的值/bigs 被添加的环境变量 process.env 中
const BASE_URL = process.env.NODE_ENV === 'production'?'/bigs':'/'
const resolve = dir => {
  return path.join(__dirname, dir)
}

module.exports = {
  //2、-------------------------------------------注意这里设置 publicPath
  publicPath: BASE_URL,                    
  chainWebpack: config => {
    config.resolve.alias
      .set('_c', resolve('src/components')) 
  },
}

至此,打包后上传到nginx的 /html/bigs 目录即可 ,只能上传到此目录

四、这个问题是我2020年遇到时处理过一次,后来在我开发“网上邻居”这个软件时,又遇到了,竟然所我搜到以以前自己写的文章,而且还没有发现是自己写的,特此记录,希望下次再遇到能快速解决吧!!!

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址