前言
默认情况下,使用 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简单配置