Vue项目打包常见问题整理

更新日期: 2018-12-28阅读量: 2147标签: vue

vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘。


1、js 路径问题

脚手架默认打包的路径为绝对路径,改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath,把原来 ‘/’ 改为 ‘./’

build: {
     assetsPublicPath: './'
}


2、img 路径问题

在 build/utils.js 文件中 ExtractTextPlugin extract 节点下,添加一行:publicPath: ‘…/…/’

if (options.extract) {
    return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
    })
} else {
    return ['vue-style-loader'].concat(loaders)
}


3、favicon.ico 问题

① 在 build/webpack.prod.conf.js 文件中 new htmlwebpackPlugin 节点下, 添加一行:favicon: config.build.favicon

new htmlWebpackPlugin({
     filename: config.build.index,
     template: 'index.html',
    favicon: config.build.favicon
})


② 在 config/index.js 文件中 build 节点下,添加一行 : favicon:path.resolve( __dirname, ‘…/src/favicon.ico’ )( PS:favicon.ico 放在 src 目录下)

module.exports = {
     build: {      
         favicon:path.resolve(__dirname, '../src/favicon.ico')
     }
}


4、IE9+ 兼容性问题

由于 axios 是基于 promise 之上实现的,在 IE 下会有兼容性问题。

① 安装 babel-polyfill

yarn add babel-polyfill

② 修改 build/webpack.base.conf.js 文件中 entry 节点

entry: {
     app: ['babel-polyfill', './src/main.js']
}


5、禁止生成 .map 文件

修改 src/config/index.js 中 productionSourceMap 

productionSourceMap:false



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1714

Vue的理解:Vue.js新手入门指南

从一个从未接触过除HTML+CSS+JavaScript+JQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目,我总结了一些知识和经验想与大家分享。

尤雨溪回应:为什么 Vue 在国际上越来越没影响力?

Vue 本来就是以低门槛起家,市场定位的主要用户自然是中小型企业,还有很大一部分用量在 freelancer(自由职业开发者)和小型的 agency(外包公司?)手里,这些场景在大公司打工人的世界观里是不存在的,自然会形成一种认知落差。

使用v-for时为什么要加key

Vue 和 React 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。Vue 和 React 的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设:

Vue基于snabbdom做了哪些事

Snabbdom 核心代码大约只有 200 行。它提供了模块化架构,具有丰富的功能,可通过自定义模块进行扩展。在了解核心 patch 前,需要先了解 snabbdom 的模块化架构思想。

实战技巧,Vue原来还可以这样写

今天产品经理又给我甩过来一个需求,需要开发一个图表,拿到需求,瞄了一眼,然后我就去echarts官网复制示例代码了,复制完改了改差不多了,改完代码长这样

Vue的href动态拼接绑定

:href前面要加“:”或者v-bind: 字符串要用单引号包住 加上了冒号是为了动态绑定数据,等号后面可以写变量。 如果不使用冒号,等号后面就可以写字符串等原始类型数据。这是就无法进行动态绑定数据了

Vue中的scoped及穿透方法

由于scoped看起来很美好,但是含有很多的坑,所以,不推荐不使用scoped属性,而通过在外层dom上添加唯一的class来区分不同组件。这种方法既实现了类似于scoped的效果,又方便修改各种第三方组件的样式,代码看起来也相对舒适

vue history模式刷新出现404

vue单页因微信分享和自动登录需要,对于URL中存在’#’的地址,处理起来比较坑。但是换成history模式,就会有个新的问题,就是页面刷新后,页面就无法显示了(404)。

Vue 中的受控与非受控组件

熟悉 React 的开发者应该对“受控组件”的概念并不陌生,实际上对于任何组件化开发框架而言,都可以实现所谓的受控与非受控,Vue 当然也不例外。并且理解受控与非受控对应的需求场景,可以让我们在设计一些基础组件时思路更加清晰,暴露出来的组件 API 也更加合理、统一。

Vue 3.0 对 Web 开发意味着什么?

Vue的创建者Evan You向我们展示了Vue 3.0 —— 这是不断上升的Javascript框架的最新版本。这些优化使Vue更高效,更模块化且更易于使用。我将讨论这些变化以及我认为的他们将在Vue 3.0发布后对现有开发产生的影响。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!