vue2 部署到二级目录下的相关配置

kaiking_g

已于 2023-02-01 14:14:58 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识 vue 文章标签： vue

于 2023-01-29 20:01:20 首次发布

本文链接：https://blog.csdn.net/u013299635/article/details/128793540

vue 同时被 2 个专栏收录

29 篇文章

订阅专栏

前端知识

4 篇文章

订阅专栏

本文详细介绍如何将Vue项目部署到特定子路径下，并确保所有静态资源和路由正确解析。通过修改index.html、config/index.js及router.js等文件，实现127.0.0.1:80/demo/路径下的正常访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查了半天，都是vue3的配置，以下操作，亲测有效；

比如这里一级目录为： 127.0.0.1:80/
二级目录下部署vue项目： 127.0.0.1:80/demo/
按如下配置即可

1.index.html head标签内添加

<head>
	<meta base="/demo/">
</head>

2.config/index.js

build:{
	assetsSubDirectory: 'static',
	assetsPublicPath: '/demo/',
}

3.router.js

const router = new VueRouter({
  mode: 'hash',
  base:'/demo/',  // 这是二级路径                         
  routes
})

4.如果页面上有动态修改css的设置，比如

	<!-- index.html里直接引用这样写即可 -->
  <link rel="stylesheet" href="./static/css/theme/normal.css">
  <!-- js动态引用 -->
  <link rel="stylesheet" href="" id="themeStyle">

// js动态引用，需要加上目录 /demo/
document.getElementById('themeStyle').href = `/demo/static/theme/blue.css`