Preface:
In Vue project development, more or less stepped build packaged pit, where for the build package, dist need to see a blank page, and follow-css style chaos fastest solution! !
text:
After the project is completed, start packing, not much to say, direct npm run build command and press enter.
(Note: the premise is that you need to install node.js environment, or can not run, do not understand their own Google.)
After the build is completed package in our project directory, it will be more of a dist file. It does not refresh.
as the picture shows:
Question 1:
This has been packed, and now point to open files, run index.html, there will be a blank, and F12 will see the error! That is the wrong path, and now we have to fix it.
The first step: After reading the package because the wrong path, you first need to modify the config / index.js file.
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: './', //此处 '/' 修改为 './' /** * Source Maps */ .......
After modification, once re-packaged in npm run build, you can see the normal page.
Question 2 :
According to the above method of treatment, and now we have to open the page preview, but, packaged img files do not appear as we expected, there is a problem here does not show the picture, but also the path of read errors.
Approach:
We need to configure the path to the image file in the build package.
Figure: find the build file below utils.js
Find ExtractTextPlugin.extract, configure
Figure:
修改完成后，在重新打包一次即可解决。
问题3：
打开页面后，引用的图片可以正常显示，如果你的页面使用了相同的class 命名，你的页面会出现，莫名其妙的样式塌陷，缺失等问题。这里，你需要重新梳理命名，且规范命名。
除此之外，还有方法可以进行解决，但只能解决大部分问题，部分冲突还得自行手动解决。
有内容，无样式，解决方法：
查看 build文件下的 webpack.prod.conf.js ,进行修改，如图
有写版本，在项目构建中，并未生成 OptimezeCSSPlugin({ ...}) 这个函数，就是这个坑害死人，但现在多数都会生成，知道就好。
回答，关于样式扯淡变形问题，解决方法：
不知道，大家有没有注意并查询过 <style scoped>...</style> 中 scoped这个属性，特别是新手，这个属性是 范围样式的意思，<style scoped>也是H5的新特性，它用来限制样式只适用于当前组件，避免组件间的样式干扰。没有scoped 的话，在里面添加一个就可以了。但对于命名重复导致的样式冲突的问题，还是存在，需要自行更改解决，所以，在代码书写，及命名上，请遵循行业规范。
如果，还是没有解决问题，那最可能的问题就是，你的mian.js中样式引入的顺序问题，样式没有生效，可能是被第三方组件样式覆盖了，将router放在最后面引入，就可以实现组件样式在第三方样式之后渲染。
好的，针对标题的问题解决方法到处结束！谢谢。