Vue打包注意事项

2018-11-11 admin

在使用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打包时的一些收获,如果大家觉得有哪些不足之处,可以指出,我一定将其改正。

原文链接:https://segmentfault.com/a/1190000016967005

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-45094.html

文章标题:Vue打包注意事项

相关文章
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 => 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: <script> exp...
2017-03-13
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的<span style=“color: orange;”>“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
详解vue-validator(vue验证器)
官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 单独使用vue-val...
2017-03-07
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable=“true” 的 div ,而在这个 div 上是使用 v-model 是没有效果的。那...
2017-03-20
回到顶部