Vue Cli 3.0实现打包后直接访问

前言

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

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

实现

• 确保vue-router模式为 hash 模式
• 修改vue.config.js中publicPath为 ' ./ ' 即可
• 若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简单配置