Vue项目用build打包,dist打开页面空白+Css样式混乱的坑,解决方法
前言:
在Vue项目开发中,或多或少都踩过build 打包的坑,这里针对build打包后,需要查看dist页面出现空白,和后续css样式出现混乱的最快解决方法!!
正文:
项目完成后,开始打包,不多说,直接 npm run build 命令,回车。
(注:前提是你需要安装 node.js环境,否则无法运行,不懂自行Google。)
在 build 打包完成后,在我们的项目目录里面,会多出一个 dist文件。没有就刷新一下。
如图所示:
问题1:
这就已经打包好了,现在点开文件,运行 index.html,会出现一片空白,并且 F12 查看会报错!那是路径错误,现在我们就来解决它。
第一步:由于打包后读取的路径不对,首先需要修改config/index.js文件。
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', //此处 '/' 修改为 './' /** * Source Maps */ .......
修改后,在 npm run build 重新打包一次,就可以看见正常的页面了。
问题2:
按照上面方法处理,现在我们已经可以打开页面预览效果了,可是,打包的img文件不一定按照我们预想的出现,这里就出现图片不显示的问题,也是路径读取错误。
处理方法:
我们需要配置 build 打包文件中的图片路径。
如图:找到build 文件下面的 utils.js
找到 ExtractTextPlugin.extract ,进行配置
如图:
修改完成后,在重新打包一次即可解决。
问题3:
打开页面后,引用的图片可以正常显示,如果你的页面使用了相同的class 命名,你的页面会出现,莫名其妙的样式塌陷,缺失等问题。这里,你需要重新梳理命名,且规范命名。
除此之外,还有方法可以进行解决,但只能解决大部分问题,部分冲突还得自行手动解决。
有内容,无样式,解决方法:
查看 build文件下的 webpack.prod.conf.js ,进行修改,如图
有写版本,在项目构建中,并未生成 OptimezeCSSPlugin({ ...}) 这个函数,就是这个坑害死人,但现在多数都会生成,知道就好。
回答,关于样式扯淡变形问题,解决方法:
不知道,大家有没有注意并查询过 <style scoped>...</style> 中 scoped这个属性,特别是新手,这个属性是 范围样式的意思,<style scoped>也是H5的新特性,它用来限制样式只适用于当前组件,避免组件间的样式干扰。没有scoped 的话,在里面添加一个就可以了。但对于命名重复导致的样式冲突的问题,还是存在,需要自行更改解决,所以,在代码书写,及命名上,请遵循行业规范。
如果,还是没有解决问题,那最可能的问题就是,你的mian.js中样式引入的顺序问题,样式没有生效,可能是被第三方组件样式覆盖了,将router放在最后面引入,就可以实现组件样式在第三方样式之后渲染。
好的,针对标题的问题解决方法到处结束!谢谢。