使用vue开发过一段时间了,采用 Vue-cli脚手架中出现一些页面空白问题的解决方法总汇
我们会发现页面head中引用的js和css文件是出现了路径错误,这里修改如下:
解决位置:config/index.js文件:把assetsPublicPath: '/'改为assetsPublicPath: './'
build: {
assetsPublicPath: './',
}
webpack-dev-server >= 2.8.0 的版本在 iOS Safari 下无法打开网页,效果为白屏。
控制台报错:Can't find variable: SockJS 应该是 Safari 的 BUG,比如下面的代码就会抛出
Error eval("const a = function () {}; function b() { a(); }; b();")
yarn add webpack-dev-server@~2.7.0 -D
yarn add babel-plugin-transform-es2015-block-scoping -D
修改 webpack 相关配置
{
test: /\.js$/,
loader: 'babel-loader',
include: [
...,
/node_modules\/webpack-dev-server/
]
}
npm run dev后可能出现无法加载到路由模板的信息。
解决位置:config/index.js文件:把
devtool: '#eval-source-map' 改为devtool:'inline-source-map'
dev: {
devtool:'inline-source-map',
}
默认只能通过localhost或者127.0.0.1才能访问,如果使用本机的Ip地址会出现无法访问到的情况。
解决位置:config/index.js文件:把config/index.js中“host” 配置为“0.0.0.0”就可以解决,或者设置为你电脑的IP地址也行:
dev: {
host: '192.168.10.122',
}
这是由于IE对promise的支持不好,我们需要安装:babel-polyfill和es6-promise:
npm install babel-polyfill
npm install es6-promise
然后在main.js文件中引用:
import 'babel-polyfill'
import Vue from 'vue'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()
最后 build/webpack.base.conf.js 文件中配置如下:
module.exports = {
entry: {
app: ["babel-polyfill", "./src/main.js"]
}
};
a:出现变量定义两次的错误描述,如下:
SyntaxError: Cannot declare a let variable twice
原因是由于ios 10中Safari中错误描述如下:当你定义一个与参数同名的for循环迭代变量时,我们错误地认为这是一个语法错误。解决方法如下:
找到webpack.prod.conf.js文件,在UglifyPlugin的定义里添加关于mangle的选项
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
},
mangle: {
safari10: true
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
b:使用Swiper插件:这是由于Swiper插件中用到了ES6的语法a = b ** c,a是b的c次方,而iOS 10的Safari里不认识这样的语法,认为这是一个错误,所以你需要让Swiper经过babel的包装,而缺省状态下babel是不对node_modules里的模块进行编译的。解决方法是在项目根目录下新建一个文件vue.config.js,在里面添加如下语句:
module.exports = {
chainWebpack: config => {
config.rule('js').include.add(/node_modules\/(dom7|swiper)\/.*/)
}
}
vue中出现空白页面的情况大概也就就上面这些了,如何遇到其他情况,欢迎留言讨论总结。
webpack是开发Vue单页应用必不可少的工具,它能管理复杂的构建步骤,并且优化你的应用大小和性能, 使你的开发工作流更加简单。在这篇文章中,我将解释使用webpack提升你的Vue应用的4种方式,包括:单文件组件、优化Vue构建过程、浏览器缓存管理、代码分离
在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性watch,在这里我总结watch属性的三种场景使用希望对你有所帮助
首先我们来看一下vue官方是怎么解释的m好了,我知道很多刚接触的vue的小白其实都不太看的懂官方文档在讲什么,下面我用自己的话翻译一下。
在vue2.0的main.js中引入scss文件报错原因是:在build文件夹下的webpack.base.conf.js的rules里面添加配置,vue3.0写入.scss文件在mian.js中 import ‘./styles/index.scss‘后出现下图报错解决方法:在vue.config.js文件中添加以下代码
在需要身份验证的前端应用里,我们经常想通过用户角色来决定哪些内容可见。比如,游客身份可以阅读文章,但注册用户或管理员才能看到编辑按钮。在前端中管理权限可能会有点麻烦。你之前可能写过这样的代码
主要讲Vue三种方式调用组件:v-model或者.sync显式控制组件显示隐藏,通过js代码调用,通过Vue指令调用,在写组件的时候很多写法、灵感来自于element-ui
在此之前,子组件到父组件的传递事件我一般还是使用 $emit 和 $on,因为这个操作理解起来并不难,代码一般也挺清晰。
vue是非常流行的框架,他结合了angular和react的优点,从而形成了一个轻量级的易上手的具有双向数据绑定特性的mvvm框架。本人比较喜欢用之。在我们用vue时,我们经常用到一个方法是this.$nextTick
Vue高版本中一些新特性的使用:深度作用选择器、组件配置项inheritAttrs、组件实例属性$attrs和$listeners、组件选项 provide/inject、作用域插槽 slot-scope、Vue的错误捕获
Vue 和 React 都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。Vue 和 React 的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!