Vue热更新失效的问题探究

小蓝 • 2024-12-02 20:34 • 编程

一、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中，可以使用来限定样式的作用域。但是当使用了穿透符号（>>>）时，可能会导致样式失效。

此时需要使用/deep/或者::v-deep来代替穿透符号。

/* 使用/deep/ */

  .my-style /deep/ p {
    color: red;
  }


/* 使用::v-deep */

  .my-style::v-deep p {
    color: red;
  }

七、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');
    }
  }
});

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/195454.html