vue-cli3项目打包

缺乏、安全感 2022-10-09 03:12 150阅读 0赞

一定要看：[Vue Cli3 项目打包优化][Vue Cli3]

### 1.vue之地址栏\#号问题 ###

[https://segmentfault.com/a/1190000015664067][https_segmentfault.com_a_1190000015664067]

vue项目页面地址自动添加\#号的问题

[https://blog.csdn.net/qq\_27474555/article/details/97900064?utm\_medium=distribute.pc\_aggpage\_search\_result.none-task-blog-2~all~sobaiduend~default-1-97900064.nonecase&utm\_term=url%E5%9C%B0%E5%9D%80%EF%BC%83%E9%97%AE%E9%A2%98%20vue&spm=1000.2123.3001.4430][https_blog.csdn.net_qq_27474555_article_details_97900064_utm_medium_distribute.pc_aggpage_search_result.none-task-blog-2_all_sobaiduend_default-1-97900064.nonecase_utm_term_url_E5_9C_B0_E5_9D_80_EF_BC_83_E9_97_AE_E9_A2_98_20vue_spm_1000.2123.3001.4430]

### 2.解决：vue打包后无法在本地正常运行 ###

**在`history`模式下才会出现：需要配置**

解决：vue打包后无法在本地正常运行，仅限于在本地运行，在服务器上运行，需要修改为绝对路径，即默认的路径

**1.vue-cli3以上的解决办法：**

方法一：新建vue.config文件，在vue.config中配置添加属性， 参考 [vue.config配置][vue.config]

1.  module.exports = \{
2.  publicPath: './',
3.  //这里可以是空的字符串，也可以是'./',这样就表示全部的assets资源路径用相对路径
4.  
5.  \}

方法二：在vue ui界面直接修改,将公共路径修改空或者为./

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70][]

**2.vue-cli2.0的解决办法：**

运行打包命令：npm run build

生成了dist文件夹

点击 index.html，浏览器显示空白，原因是打包路径配置成了绝对路径：assetsPublicPath: '/',

解决办法：在config/index.js文件中将打包路径配置为相对路径：assetsPublicPath: './',//在路径前面加一个点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 1][]

[Vue Cli3]: https://www.jianshu.com/p/476387c7fea3
[https_segmentfault.com_a_1190000015664067]: https://segmentfault.com/a/1190000015664067
[https_blog.csdn.net_qq_27474555_article_details_97900064_utm_medium_distribute.pc_aggpage_search_result.none-task-blog-2_all_sobaiduend_default-1-97900064.nonecase_utm_term_url_E5_9C_B0_E5_9D_80_EF_BC_83_E9_97_AE_E9_A2_98_20vue_spm_1000.2123.3001.4430]: https://blog.csdn.net/qq_27474555/article/details/97900064?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduend~default-1-97900064.nonecase&utm_term=url%E5%9C%B0%E5%9D%80%EF%BC%83%E9%97%AE%E9%A2%98%20vue&spm=1000.2123.3001.4430
[vue.config]: https://cli.vuejs.org/config/#vue-config-js
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70]: /images/20221005/3f48e84e4d88418e8d989cf21adc3da5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpZ3VhbmdfODIw_size_16_color_FFFFFF_t_70 1]: /images/20221005/38244c78123b46c4b3595ed5314d82d8.png