当前位置：网站首页 > 技术资源 > 正文

问题:vue项目打包后，放到二级目录无法访问的解决方案

off999 2025-01-08 16:30 32 浏览 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年遇到时处理过一次，后来在我开发“网上邻居”这个软件时，又遇到了，竟然所我搜到以以前自己写的文章，而且还没有发现是自己写的，特此记录，希望下次再遇到能快速解决吧！！！

nginx的根目录

上一篇：Nginx配置中root和alias分不清?本文3分钟帮你解惑
下一篇：vue项目打包后部署到nginx

问题:vue项目打包后，放到二级目录无法访问的解决方案

一、背景

二、现象

三、解决

相关推荐

取消回复欢迎你发表评论:

抖音上好看的小姐姐，Python给你都下载了

全网最简单易懂!495页Python漫画教程，高清PDF版免费下载

飞牛NAS部署TVGate Docker项目，实现内网一键转发、代理、jx

Python 3.14 的 UUIDv6/v7/v8 上新，别再用 uuid4 () 啦!

python入门到脱坑输入与输出—str()函数

宝塔面板如何添加免费waf防火墙?（宝塔面板开启https）

Python三目运算基础与进阶_python三目运算符判断三个变量

(新版)Python 分布式爬虫与 JS 逆向进阶实战吾爱分享

失业程序员复习python笔记——条件与循环

系统u盘安装（win11系统u盘安装）

问题:vue项目打包后，放到二级目录无法访问的解决方案

一、背景

二、现象

三、解决

相关推荐

取消回复欢迎 你 发表评论:

抖音上好看的小姐姐，Python给你都下载了

全网最简单易懂!495页Python漫画教程，高清PDF版免费下载

飞牛NAS部署TVGate Docker项目，实现内网一键转发、代理、jx

Python 3.14 的 UUIDv6/v7/v8 上新，别再用 uuid4 () 啦!

python入门到脱坑 输入与输出—str()函数

宝塔面板如何添加免费waf防火墙?（宝塔面板开启https）

Python三目运算基础与进阶_python三目运算符判断三个变量

(新版)Python 分布式爬虫与 JS 逆向进阶实战吾爱分享

失业程序员复习python笔记——条件与循环

系统u盘安装（win11系统u盘安装）

取消回复欢迎你发表评论:

python入门到脱坑输入与输出—str()函数