vue项目首次加载页面空白

2,447 阅读1分钟

1.使用路由懒加载

路由懒加载配置:

image.png

非路由懒加载配置:

image.png

开始没有用懒加载,就显示空白,使用懒加载后就解决了

2.去掉编译文件中的map文件。

在config/index.js文件中将productionSourceMap 的值设置为false.(自己没有使用过)

3.使用CDN

1.在index.html中引入

2.修改/build/webpack.base.conf.js中修改配置。给module.exports添加externals属性(详见webpack.docschina.org/configurati…),其中键是项目中引用的,值是所引用资源的名字。需要注意的是资源名需要查看所引用的JS源码,查看其中的全局变量是什么,例如element-ui的全局变量就说ELEMENT

3.删除原先的import 如果不删除原先的import,项目还是会从node_modules中引入资源。 也就是说不删的话,npm run build时候仍会将引用的资源一起打包,生成文件会大不少。所以我认为还是删了好。