一、Vue热更新
Vue的热更新非常方便,在开发过程中,只需要修改代码,页面就会自动重新加载。这种机制大大提高了开发效率。但是在某些情况下,热更新可能会失效。
二、Vue项目热更新失效
在一些情况下,Vue项目的热更新会失效。
一个常见的原因是在组件的mounted生命周期中使用了ajax请求,导致mounted在刷新时被执行,那么页面就不会再次刷新。为了解决这个问题,我们可以将ajax请求放到created或者beforeCreate钩子函数里面。
created() {
axios.get(url).then(res => {
this.data = res.data;
});
}
三、Vue跨域代理失效
在开发中,我们经常会遇到需要访问跨域数据的情况。Vue提供了proxyTable配置项来解决这个问题。但是在某些情况下,跨域代理也会失效。
需要注意的是,Vue的proxyTable只在使用npm run dev命令运行应用时生效。如果使用webpack打包应用,则需要使用跨域插件来解决跨域问题。
const path = require('path');
const express = require('express');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.listen(3000, () => console.log('Server running on port 3000'));
四、Vue打包后路由失效
在Vue项目中,如果使用了vue-router,打包之后可能会出现路由失效的问题。这时候需要在router.js中进行配置。
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
}
],
mode: 'history' // 配置mode为history
})
五、Vue打包后代理失效
在使用webpack打包Vue应用后,配置的代理可能会失效。解决方法是在webpack.prod.conf.js中添加devServer选项。
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8888', // 目标地址
secure: false
}
}
}
})
六、Vue样式穿透失效
在Vue中,可以使用 /* 使用::v-deep */
七、Vue双向数据绑定失效
在Vue中,双向数据绑定使得数据的修改和视图的更新能够相互绑定。但是在使用v-model时,数据绑定可能会失效。
原因是在一些情况下,v-model的value值被修改后,视图并没有立即更新。这时候我们可以手动触发视图更新。
<input type="text" v-model="message" />
watch: {
message: function (newVal, oldVal) {
if (newVal !== oldVal) {
this.$nextTick(function () {
this.$forceUpdate();
});
}
}
},
八、Vue的click方法失效
在Vue中,如果使用@click或者v-on:click绑定事件,可能会出现方法失效的问题。
这时候需要检查页面中是否存在多个vue实例,如果存在,则需要在绑定事件时指明对应的vue实例。
<div id="app-1">
<!-- ... -->
</div>
<div id="app-2">
<!-- ... -->
</div>
/* 没有指明vue实例 */
<button @click="myClick">点击</button>
/* 指明vue实例 */
<button @click="myClick(app1)">点击</button>
var app1 = new Vue({
el: '#app-1',
methods: {
myClick () {
console.log('clicked app1');
}
}
});
var app2 = new Vue({
el: '#app-2',
methods: {
myClick () {
console.log('clicked app2');
}
}
});