前后端分离——前端vue开发笔记

最新推荐文章于 2025-03-01 19:48:24 发布

Beam007

最新推荐文章于 2025-03-01 19:48:24 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/83544824

vue 专栏收录该内容

27 篇文章

订阅专栏

本文记录了Vue开发中遇到的各种问题及解决方案，包括找不到.vue文件、路由报错、生命周期理解、动态路由加载、Vue devtool插件问题、$route与$router区别、IE兼容性、v-model状态更新、网络影响、外部包引入、eslint使用、打包报错、跨域代理配置、文件存放规则以及npm run dev不停运行等常见问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、报错找不到.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绑定数据无法触发状态更新

官方文档 https://cn.vuejs.org/v2/guide/list.html#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9 有提到
“数组更新检测”部分的注意事项写明了：由于 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不停在跑。为啥呢？