Vue打包注意事项

felix0913 发布于2019-08-23 13:00 / 2298人阅读

摘要：在使用进行项目打包时，发现了一些以前没注意到的点，因此写下此文，记录一下，如果可以对大家有所帮助，那就更好了。原因中默认打包后创建文件，以提醒开发人员错误位置。解决方式图片描述打开项目根目录下的文件，找到将这个参数改为即可。

在使用vue-cli进行项目打包时，发现了一些以前没注意到的点，因此写下此文，记录一下，如果可以对大家有所帮助，那就更好了。
1.直接使用npm run build 打包时，会出现一些以.map结尾的文件

.map文件的作用：由于打包后代码会进行加密，这时如果运行错误，输出的错误信息无法准确得知是哪里的代码报错，而有了这些.map文件当代码出现错误时，可以像未加密时一样，准确的输出错误在那个位置。
原因：vue-cli中默认打包后创建.map文件，以提醒开发人员错误位置。
解决方式：
    ![图片描述][1]
    打开项目根目录下的/config/index.js文件，找到 productionSourceMap: true, 将这个参数改为false即可。
建议：
    一般情况下，项目都是经过测试完之后才上线，代码基本上不会有什么问题，所以这时报错提示基本上没有什么用，反而会占一定的体积，因此可以将它删除。

2.打包之后出现页面渲染不出来的情况

 原因：打开控制台后看见报错信息显示是路径找不到，原因是vue-cli打包默认情况下使用的是绝对路径，将其打包后的路径改为相对路径即可
 解决方式：
     ![图片描述][2]
     打开项目根目录下的/config/index.js文件，找到 assetsPublicPath: "/"这个参数，将其修改为  "./"即可。

3.在代码中引入图片时，使用相对路径，这样可以避免出现打包后图片出不来的情况。

以上就是我在进行Vue打包时的一些收获，如果大家觉得有哪些不足之处，可以指出，我一定将其改正。

GPU云服务器云服务器 Vue_Vue 的注意事项快照注意事项机柜托管注意事项

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99148.html

Webpack + Vue 多页面项目升级 Webpack 4 以及打包优化

摘要：想要使用阶段的语法需要单独引用对应的，上面的配置只加了几个处于阶段的，老项目建议使用升级，自动添加依赖添加配置文件按需引入增加配置其他问题下面是我公司项目中遇到的问题，各位升级过程中如果遇到同样的问题可以参考一下解决思路。 0. 前言早在 2016 年我就发布过一篇关于在多页面下使用 Webpack + Vue 的配置的文章，当时也是我在做自己一个个人项目时遇到的配置问题，想到别人也...

Anchorer 2019-08-23 14:24 评论0 收藏0
【easy-invoices】electron-vue、sqlite3 项目初探

摘要：远程读取会有许多限制，防止引起不必要的安全隐患。比较时可以把点去掉转为数字类型比较脚本执行完毕下载前可以拿到更新日志时间版本号和包大小，下载时可以拿到速度。然后开启该项目的构建。将第一步生成的填至项目环境变量，参数名为。父母都是做出纳相关的工作，希望我能给他们做个简单的进销存，在上班的时候使用。开发一个不需要花钱买服务器，不需要依赖网络（更新除外），单机版的程序，对于前端出身的我来说...

wpw 2019-08-23 12:36 评论0 收藏0
实现element-ui的按需引入，按需打包加载

摘要：简单说明原理使用实现按需引入打包。这里采用多入口配置，实现各个功能模块分别打包成一个文件，并使用将样式进行抽离后，按入口进行打包为对应的文件。只要在指定入口名为。这个相关配置已经发布了包。简单说明原理：使用babel-plugin-component实现按需引入、打包。将webpack配置成多入口，保证最终打包的目录结构符合babel-plugin-component插件的要求，实...

TesterHome 2019-08-23 10:41 评论0 收藏0
灵活使用vue单文件组件之--最少配置打包.vue组件

摘要：但是，面对辣么多的配置文件，还是从开始自己来吧，毕竟我只想打包一个组件。这里想一下我们的需求，我们想要打包一个组件，使用，根据上面的说明，不难想到还应该需要一个可以用来识别并转换文件，一句话，就是把按下面格式的编写的组件转换为模块。对于vue单文件组件的使用，我们知道使用vue-cli可以快速生成项目结构，进行.vue单文件组件的编写，使用 npm run build命令会从main...

forrest23 2019-08-02 16:00 评论0 收藏0
灵活使用vue单文件组件之--最少配置打包.vue组件

摘要：但是，面对辣么多的配置文件，还是从开始自己来吧，毕竟我只想打包一个组件。这里想一下我们的需求，我们想要打包一个组件，使用，根据上面的说明，不难想到还应该需要一个可以用来识别并转换文件，一句话，就是把按下面格式的编写的组件转换为模块。对于vue单文件组件的使用，我们知道使用vue-cli可以快速生成项目结构，进行.vue单文件组件的编写，使用 npm run build命令会从main...

izhuhaodev 2019-08-22 11:16 评论0 收藏0