The problem of vue2 and vue3 being deployed to server subdirectories is blank pages and solving

question

Today I encountered the problem that the default hash of the vue project to deploy to the server is fine but the hhistory is blank.

I've studied it and found the answer.

vue project history pattern deployed in subpath

After the project is packaged, it can only be deployed on the server root path by default. If you want to/demo/This form

vue3+vite configuration method

existConfiguration in:

export default defineConfig(({ command }) =&gt; {
    return {
        // Add base write subpath here        base: '/demo/',  
        resolve: { /*...Omitted*/ }

    };
});

Then inrouterAdded in:

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/'


const router = createRouter({
   // Pass parameters to createWebHistory method to configure subpath  history: createWebHistory(.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
  ]
})

export default router

vue2+cli configuration method

existConfiguration in:

// 
const vueConfig = {
// Add publicPath write subpath here publicPath:'/demo/'

 //...Ignore other}

 = vueConfig

Then inrouterAdded in:

export default new Router({
  mode: 'history',
  // Add bese information  base: .BASE_URL,
  scrollBehavior: () =&gt; ({ y: 0 }),
  routes
})

Vue project hash mode deploymentOn any path

vue3+vite configuration method

BundleIn-housebaseThe configuration value is empty or./ ：

// ...Other codes are omittedexport default defineConfig(({ command }) =&gt; {
    return {
        base: '',
        //base: './',
    };
});

Bundlesrc/router/Middle routehistoryChange the mode tohashmodel:

import { createRouter, createWebHashHistory } from 'vue-router';

// ...Other codes are omittedconst router = createRouter({
    routes,
    history: createWebHashHistory()
});

vue2+vueCli configuration method

existConfiguration is empty or./：

// 
const vueConfig = {
// Add publicPath write subpath here publicPath:'./'

 //...Ignore other}

 = vueConfig

Then inrouterSet hash in:

export default new Router({
  mode: 'hash',
  scrollBehavior: () => ({ y: 0 }),
  routes
})

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.