木灵鱼儿

木灵鱼儿

阅读:475

最后更新:2022/01/16/ 20:34:59

vue cli3-cli4 打包后项目在二级路径的方法

默认情况vue的build打包,都是基于根路径来进行的,但是,如果我们将打包的文件放置再二级目录,就会导致文件无法加载,页面空白。

原因有两个:

  1. 路由路径无法正确匹配
  2. 资源文件路径错误

下面我们就来讲讲做法

路由配置

在路由实例的创建时,我们常常会看到一个base选项,内容如下:

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

base官方有很明确是解释:

类型: string
默认值: "/"
应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"

简单的讲就是你的项目文件存放的目录层级,从域名根目录下开始计算。

那么process.env.BASE_URL是什么意思呢?

process.env是node的一个系统变量,在vue cli中,会对这个process.env做自己的操作,默认情况,再不添加任何自定义环境变量文件的情况下,process.env只有两个属性:

{
    "NODE_ENV": "development",
    "BASE_URL": "/"
}

不管是在development还是production或者其他模式,默认的BASE_URL都是/

当然我们可以通过增加自定义环境变量的方式覆盖BASE_URL的属性,也可以通过简单的三元判断达到我们想要的效果。

假设我们的二级目录是:/web

const router = new VueRouter({
  mode: 'history',
  base: process.env.NODE_ENV === "production" ? "/web" : process.env.BASE_URL,
  routes
})

那就设置打包模式下的二级路径为:/web,开发模式默认值即可。

资源文件路径配置

路由的配置只是让router能正确的识别路径,但是资源文件目前都是这种绝对路径的形式:

<link  href="css/app.1920c275.css"  rel="preload"  as="style">
<script  src="js/chunk-vendors.433f29b4.js"></script>
<script  src="js/app.fcce27f5.js"></script>

所以,为了文件的加载正确,我们需要配置一下资源的路径地址

在项目根目录打开vue.config.js文件,没有就手动创建,添加以下代码:

module.exports = {
  publicPath: "./"
}

publicPath的属性表示在打包输出的资源文件基本路径,它是vue cli基于webpack的output.publicPath的自定义实现,所以官方不建议直接动output.publicPath,因为会影响到vue cli其他基于output.publicPath的设置,所以我们设置publicPath即可。

基本路径可以用router的base属性去理解,一样的意思。

这里我们使用:./ 相对路径表示,那么输出的资源文件引用就变成了:

<link  href="./css/app.1920c275.css"  rel="preload"  as="style">
<script  src="./js/chunk-vendors.433f29b4.js"></script>
<script  src="./js/app.fcce27f5.js"></script>

在html中,./相对路径表示的是相对于html文件为起点开始的,所以我们可以准确的找到资源文件,只要不改变打包后的html与资源文件的结构。

换个思维,如果我们不想设置./是否可行?

答案当然是可以的,还是以/web为例

module.exports = {
  publicPath: "/web"
}
<link  href="/web/css/app.1920c275.css"  rel="preload"  as="style">
<script  src="/web/js/chunk-vendors.433f29b4.js"></script>
<script  src="/web/js/app.fcce27f5.js"></script>

这样也是可以的,只要路径正确就行。

但是这样的话路径就是写死的了,相对来说灵活性就差了一点,如果路径变了,我们除了路由配置要修改,还得改动这个,就比较麻烦,使用相对路径./,配置一次就不用每次都改动,更加方便

服务器配置

上面两种方法是前端配置,事实上如果真的使用二级目录,且路由模式为history,那么后端也是需要设置的。

以Nginx为例,默认官方推荐添加以下设置:

location / {
  try_files $uri $uri/ /index.html;
}

但是这是相对于根目录的设置,如果是二级目录

location / {
  try_files $uri $uri/ /web/index.html;
}

那么也是需要加上/web的。

放个宝塔的配置图:

更多服务端配置参考官方文档:后端配置例子

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 475

相关文章