Relevant configuration of vue2 deployed to the secondary directory

After checking for a long time, they are all vue3 configurations. The following operations are effective for personal testing;

For example, the first-level directory here is: 127.0.0.1:80/
Deploy the vue project under the second-level directory: 127.0.0.1:80/demo/
Configure as follows

1. Add in index.html head tag

<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. If there is a setting to dynamically modify css on the page, such as

	<!-- 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`

Access like this: 127.0.0.1:80/demo/#/

Guess you like

Origin blog.csdn.net/u013299635/article/details/128793540