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

查了半天,都是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`

如此访问: 127.0.0.1:80/demo/#/

猜你喜欢

转载自blog.csdn.net/u013299635/article/details/128793540