Vue实现打包后直接访问

7,706 阅读1分钟

前言

默认情况下,使用 npm run build 打包后的 index.html 无法直接访问,需要nginx转发或使用node启用简单http serve等方式实现。

实际开发中,有时需临时打开前端项目,若可以直接打开打包后的文件,对某些场景下他人简单使用或调试较为方便。

实现

  • 确保vue-router模式为 hash 模式
  • 修改vue.config.jspublicPath./ 即可
  • 若index.html有文件的引用,修改为正确(相对)路径即可

router.js

const router = new Router({
  mode: 'history', // 注释该行即可,默认使用 hash 模式
  base: process.env.BASE_URL,
  routes: []
})

vue.config.js

module.exports = {
  // 根路径 默认使用/ vue cli 3.3+ 弃用 baseUrl
  publicPath: '/' // 此处改为 './' 即可
}

Tips:

  • vue cli 默认不会生成vue.config.js,根目录下手动创建即可
  • vue下webpack简单配置可参考文章 vue中webpack简单配置