webpack 前端框架 vue.js vue打包下来后打开的index.html页面是空白的

完成项目后直接用

npm run build打包之后，直接打开

dist文件里面的

ndex.html可以看到页面是空白的，控制台是这样的。

1.首先打开的index.html的页面展示的效果如图：

2.查看index.html源码发现路径出错

对比

dist文件夹结构可以看到资源路径的引入是错误的，应该用

'./'而不是

'/'

与资源路径对比，不在同一路经下要访问不同层级路径的文件时，应该跳出当前路径，可使用 ‘ ./ ’

3.修改路径文件

只需要在和

package.json

同级的地方新增一个

vue.config.js

文件，将路径修改为相对路径

'./'

// vue.config.js

module.exports = {

publicPath: './',

}

再次打包, 页面不是空白了，但还有很多东西没显示完，正常的页面是这个样子

但是改完

vue.config.js

文件

之后无法显示全，无法跨组件使用

4.路由模式 hash，实现组件跳转

原因：

新建项目什么都不动，路由模式：history, 直接npm run build打包会让组件之间

无法跳转！！！

解决方法：

改一下路由模式，找到router/index.js文件, 将history修改为hash, 再进行打包

// router/index.js

const router = new VueRouter({

mode: 'hash',

base: process.env.BASE_URL,

routes

})

页面显示和路由跳转就都可以了

推荐阅读

 您阅读本篇文章共花了：