问题引入

vue_router__WEBPACK_IMPORTED_MODULE_9__.createWebHashHistory) is not a function at eval (index.js:78:1)

在打包vue项目成静态文件时，你可能会碰到如下的问题：

你可能浏览了各种文章

有的叫你把 vue2升级到vue3
有的叫你把vue-router降级

确实这两种方法，都可以，但是深究原理是这样的：

vue2和vue3在启用hash模式的路由时有一些不同。主要的区别是：

在vue2中，你需要使用new VueRouter()来创建路由实例，并传入一个history属性为hash的选项对象。例如：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
  history: 'hash',
  routes: [
    // ...
  ]
})

在vue3中，你需要使用createRouter()和createWebHashHistory()来创建路由实例，并传入一个history属性为createWebHashHistory()的返回值的选项对象。例如：

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // ...
  ]
})

另外，vue3中的路由模块不需要使用Vue.use()来注册，而是直接在createApp()中使用use()方法来挂载。例如：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

解决办法

路由

vue2对应的vue-router是3的版本

所以你只需要两步就可以：

1、确保你的router的index文件有正确引用
import VueRouter from 'vue-router'
2、修改你的router对象

const router = new VueRouter({
  history:'hash',
  routes
})

修改vue.config.js文件

之所以执行这一步是因为不做的话，是打包之后，原先图片或者路由等的路径可能会发生改变

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 部署应用包时的基本 URL
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
})

vue2打包静态文件避坑

问题引入

解决办法

路由

修改vue.config.js文件

安全着陆