vue-cil3项目打包后浏览器打开空白问题

比眉伴天荒 2021-09-29 02:48 586阅读 0赞

**vue项目目录结构：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]

问题出在index.html 和 webpack.config.js两个文件夹。

1、修改index.html，如下图箭头处添加“.”( 在 /dist 前面添加点号) 。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 1]  
2、修改webpack.config.js，如下图箭头处添加“.”( 在 /dist 前面添加点号) 。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 2]

这两处修改完成后，我们在工程目录下执行 cnpm run build 打包，生成dist文件夹，我的dist内容如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 3]  
最后双击index.html即可成功打开vue项目。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 4]  
到此编译就成功了。

注：要进行调试的时候，还是要把前面两处加的点号去掉，否则调试会打不开。  
这一切都与环境路径有关 【./dist】【/dist】，在node运行项目时，根目录在vue项目目录，所以用/dist没问题。但是打包好后，根目录就不是本项目了，所以要改 ./dist 来锁定本打包后项目放置文件夹的路径。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70]: /images/20210726/02b5f248b0a64443a8ad85e40e8483c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190629161136747.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190629161419471.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190629161706182.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190629161810100.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1Nzc0NzQ=,size_16,color_FFFFFF,t_70