完成项目后直接用
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
})
页面显示和路由跳转就都可以了