【vue】问题集锦

Beam
340 阅读3分钟

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

一、报错找不到.vue

明明路径没错，因为同一文件夹下存在同名的index.vue/index.js/index.css文件，所以配置的查找顺序一定要对。

webpack.base.conf.js中配置：

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }

默认先查找.js再找.vue再找.json文件，所以换一下顺序即可。

改为：extensions: ['.vue', '.js', '.json']

——————————————————————

  • 报错：Failed to mount component: template or render function not defined.
  • 翻译：模板无法加载。
  • 意思是：<template>没有定义或者说没有包裹在<template>中，怎么可能呢。
  • 原来是：因为没有配置加载顺序，默认先加载.js文件，所以需要配置到/index.vue。
  • 错误路由引入：
  • const User = resolve => require(['@/views/bpgca/system/user'], resolve)
  • 正确路由引入：
  • const User = resolve => require(['@/views/bpgca/system/user/index.vue'], resolve)

——————————————————————

二、vue的生命周期

将路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件：

  • beforeRouteLeave：路由组件的组件离开路由前钩子，可取消路由离开。
  • beforeEach：路由全局前置守卫，可用于登录验证、全局路由loading等。
  • beforeEnter：路由独享守卫
  • beforeRouteEnter：路由组件的组件进入路由前钩子。
  • beforeResolve：路由全局解析守卫
  • afterEach：路由全局后置钩子
  • beforeCreate：组件生命周期，不能访问this。
  • created：组件生命周期，可以访问this，不能访问dom。
  • beforeMount：组件生命周期
  • deactivated：离开缓存组件a，或者触发a的beforeDestroy和destroyed组件销毁钩子。
  • mounted：访问/操作dom。
  • activated：进入缓存组件，进入a的嵌套子组件(如果有的话)。 执行beforeRouteEnter回调函数next。

三、动态路由加载

/* 无语routeArray[0].children.push(routeChild)就报错
[vue-router] "path" is required in a route configuration. */
routeArray[0].children = routeChild

但是后面换了一种写法又不报错了，费解。

四、Vue.js devtool插件问题

报错：

Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

  • 1、刷新后打开开发者工具，没用。
  • 2、更多工具-扩展程序-Vue.js devtools详细信息-允许访问文件网址打开，没用。
  • 3、修改Users\***\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdogjmejiglipccpnnnanhbledajbpd\对应版本下的manifest.json文件。

改

"background": {
    "persistent": false,
    "scripts": [ "build/background.js" ]
}

为

"background": {
    "persistent": true,
    "scripts": [ "build/background.js" ]
}

没用。

  • 4、检查是否使用的是vue.min.js，恍然意识到打开的是服务器上的web系统使用的vue.min.js，打开本地的系统vue.js devtool能正常使用！！

五、$route和$router的区别和使用

$route是一个对象，当前路由对象，从中可以获取name、path、query、params等

$router是VueRouter的一个实例对象，可调用其中的push、replace、go等方法进行路由跳转

因为main.js中有：

import router from './route'
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

所以对于.vue来说已经全局导入了router，在对应的js就无需再次import router from '../../route'，只需使用this.$router.push()等路由跳转方法即可。

而对于其他js文件，因为没有this.$router对象，所以需要从外部导入import router from '../../route'，然后使用router.push()等路由跳转方法即可。

六、Vue在IE下显示空白问题

现象：

IE打开vue写的前端项目，一片空白，控制台报错“Promise未定义”或报错[vuex] vuex equires a Promise polyfill in this browser.

原因：

主要是IE对Promise支持不友好，对ES6新语法不支持。

解决步骤：

  • 1、安装 npm install --save babel-polyfill
  • 2、在package.json中添加依赖，
devDependencies：{
    "babel-polyfill": "^6.22.0"
}
  • 3、在main.js中添加引用import 'babel-polyfill'
  • 4、在webpack.base.config.js文件中修改，往app数组添加'babel-polyfill'
module.exports = {
     entry: {
     app: ['babel-polyfill', './src/main.js']
     }
}

拓展：

  • 最新ES 语法：比如，箭头函数
  • 最新ES API：比如，Promise
  • 最新ES 实例方法：比如，String.includes

七、v-model绑定数据无法触发状态更新

官方文档 cn.vuejs.org/v2/guide/li… 有提到

“数组更新检测”部分的注意事项写明了：由于 JavaScript 的限制，Vue 不能检测以下变动的数组。

  • 1、当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
  • 2、当你修改数组的长度时，例如：vm.items.length = newLength

正巧我就碰到1所述的情况：

let arrayList = [
	{
		code: 'a',
		val: 'aaa'
	},
	{
		code: 'b',
		val: 'bbb'
	}
]
for (let i = 0; i < arrayList.length; i++) {
	let code = arrayList[i].code
	let val = arrayList[i].val
	this.buildData[code] = val
}

明明console(this.buildData)出来buildData是有值的，但是v-model绑定的{{buildData['a']}}却显示空白。

参照官方提供的解决办法如下：

方法一： 通过 vm.$set 实例方法依次循环赋值，

改
this.buildData[code] = val
为
this.$set(this.buildData, code, val)

方法二： 通过 splice 函数依次循环赋值，

改
this.buildData[code] = val
为
this.buildData.splice(code, 1, val)

方法三： 我发现在循环完成后直接调用vm.$set也可触发buildData状态更新，即

for (let i = 0; i < arrayList.length; i++) {
    let code = arrayList[i].code
    let val = arrayList[i].val
    this.buildData[code] = val
}
this.$set(this.rawData)

方法四： 经尝试，在循环赋值开始前将buildData置空也可以触发其状态更新，即

this.buildData = {}
for (let i = 0; i < arrayList.length; i++) {
    let code = arrayList[i].code
    let val = arrayList[i].val
    this.buildData[code] = val
}

八、网络问题影响前端访问时

正常访问页面，然后网络连接断开或者IP变化，仍然能切换页面，只是加载不了数据，思考可能有两个原因：

  • 1、浏览器缓存
  • 2、浏览器已加载所有文件到本地

尝试清空缓存，重新登录后断网，再切换路由是没法切换的。

原因是使用了路由懒加载，且没有缓存的时候，是无法切换路由的。

懒加载：const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

若使用直接导入，webpack会把所有的路由指向包一起加载到本地文件。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

九、外部包引入的问题

有些第三方包必须要以<script>引入才有效，因为import的js需要对外暴露才可获取到其中的方法、变量。

十、vue的.sync和.$set

  • 1、el-table用.sync修饰<:current-page.sync="currentPage">可以解决删除后一页最后一条数据不往前查的问题
  • 2、对数组处理或添加新的属性时，容易出现未触发渲染，需要手动调用.$set

比如：

原来赋值方法（不成功）

// this.productInfo[0] = bbb.productInfo
// this.productInfo[1] = bbb.companyInfo

正确赋值方法（成功）

this.$set(this.productInfo,0,bbb.productInfo)
this.$set(this.productInfo,1,bbb.companyInfo)

十一、eslint启用和禁用

ESLint是一个代码规范和错误检查工具，局部禁用代码检查可将不检查部分代码夹在disable和enable之间，如下：

/* eslint-disable */
此区域内将不进行代码规范检查
/* eslint-enable */

十二、npm打包时console报错

运行npm run build打包时，报错：

Unexpected console statement

解决：

配置eslint，关闭no-console即可。

大多数人说在package.json里面的eslintConfig的rules配置，可是我这里没有eslintConfig更没有rules了。

实际上eslint有个单独的配置文件.eslintrc.js，里面有rules。

所以修改.eslintrc.js文件：

去掉'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',或者配置'no-console': off,即可。

十三、跨域问题的代理配置

/config/index.js中配置

proxyTable: {
  '/api/**': {
    target: 'http://10.10.17.63:8089/',
    changeOrigin: false,
    secure: false,
    pathRewrite: {
      '^/api': '/'
    }
  }
}

解释：

请求发送url，匹配/api的会代理到这里，目标地址是后台的IP+PORT。

pathRewrite的意思是将url中的/api替换为/即有如下效果。

目标访问后台接口：http://10.10.17.63:8089/loginUser

请求URL为：/api/loginUser，请求发送后会通过代理将目标路径拼接上并去掉拦截标识。

即将请求转发至：http://10.10.17.63:8089/loginUser

十四、webpackage配置

  • productionSourceMap：false， // 打包完后才会看不到源码
  • open: config.dev.autoOpenBrowser, // 自动打开浏览器
  • openPage: 'login', // 自动打开浏览器到指定页面

十五、文件存放static或assets

关于文件存放static还是assets下，看了很多说明后我自己的理解就是：

static下的不会编译直接复制过去，assets下的文件会进行编译。编译感觉能起到一定的“加密”作用？？

那么如果是外部引用文件就放在static，自己的文件还是放到assets吧。

但是我为了方便管理统统放到static下了，各位置引入static下的文件写法：

  • js中必须以相对路径：                     ../../../../static/json/***.json
  • css中绝对路径必须以/开始：          background: url(/static/img/***.png);
  • html标签中绝对路径可以省去/：     <img src="/static/img/***.png"/>或者<img src="static/img/***.png"/>

十六、npm run dev不停地跑

现象：

visual studio code编辑代码时，并未对代码进行修改操作，但是控制台看到npm run dev一遍一遍不停地跑。

原因：

将系统时间调整至三个月前，导致npm run dev不停在跑。为啥呢？

avatar
文章
阅读
粉丝