Vue使用过程中常见问题

目录

一、vue监听不到state数组/json对象内的元素的值的变化，要手动通知触发
二、vue用splice删除多维数组元素导致视图更新失败情况

三、vue项目如何部署到php或者java环境的服务器？

四、vue-router各种路由及跳转

五、vue-router如何取参？

六、vue中如何深度watch？

七、vue生命周期及所有东西

八、vue-router路由拦截中间件

九、axios请求拦截中间件处理

十、autoprefixer版本设置不能使用默认，browsers: ['last 2 versions']

十一、设置反向代理来调用开发环境的接口实现跨域

十二、scoped CSS样式对子组件无效问题

十三、路由鉴权逻辑

十四、如何修改Vue打包之后的文件路径为相对路径？

十五、在Vue中使用全局变量或者全局挂载

十六、旧系统手机及低版浏览器出现白屏问题的解决

十七、在vue的template里面使用style动态设置图片背景问题

十八、当配置vue项目打包出来的css/js文件不带版本号时，如何解决缓存问题？

十九、路由页面不变参数变化情况，页面状态不更新问题

二十、Vue中配置反向代理使用localhost:8080时报[HPM] Error occurred while trying to proxy request，请求时报504错误

二十一、Vue中node-sass突然使用不了，报...Run `npm rebuild node-sass` to build the binding...等错误

二十二、Vue发包上线cache control控制文件缓存策略问题，特别是index.html文件

二十三、document.activeElement.scrollIntoViewIfNeeded()解决iphone输入框移位或者vue keep-alive页面后退白屏问题

二十四、使用babel-polyfill解决旧版手机白屏或者PC浏览器兼容问题

二十五、使用computed的get,set可实时反向更改源数据

二十六、在页面上如何调用组件内的函数？

二十七、在Vue中如何突破模版限制递归渲染类树结构视图内容？

二十八、vue-router路由拦截的写法坑

二十九、移动端ios8的坑，路由前页面没有滚到顶部，路由后的页面使用了fixed内容且宽为100%时，宽度会超过750px/10rem，导致布局错乱

三十、axios请求formData的方式

三十一、vue动态设置raw html的方式

三十二、组件内部的点击事件触发dom结构重画或者重流时，导致android微信浏览器崩溃问题

三十三、Vue中子组件如何向父组件传递事件？

三十四、Vuex中的mutations操作后视图不更新问题

三十五、ios系统$router.go(-1)后退后页面图片不渲染问题

三十六、Vue内页中引入相对路径build时，其实是相对于index.html这文件的路径

三十七、Vue中使用canvas画布画图要注意的问题

三十八、Element-UI日历date-picker组件在IE下的首次渲染初始值失败问题

三十九、Vue中使用css3组合动画要注意vdom的重新渲染问题

四十、axios怎么获取到error中的response响应数据

四十一、element-ui的table表格控件表头与内容列不对齐问题

四十二、axios下载excel文件(blob二进制方式/arraybuffer方式)

四十三、如何创建一个支持v-model的组件

四十四、dev或者打包时报TypeError: Cannot assign to read only property 'exports' of object '#<Object>'错误

this.arr[index] = value;
this.$set(this.arr, index, this.arr[index]); // vue监听不到数组内的元素的值的变化，要手动通知触发,或者用compute来得出新的view数组进行处理，或者使用watch来监听变化重新进行更新

this.$set(this.jsonObj, 'myKey', myValue); // 针对jsonObj

this.arr[i] = null // 可以把元素设为null，使用时用compute进行过滤即可
this.$set(this.arr, i, this.arr[i])
// this.arr.splice(i, 1) // 此方法有可能会导致视图更新错误

this.$router.go(-1) // 后退 类似 window.history.go(n)// 字符串
router.push('/home')// 对象
router.push({ path: '/home' })// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})// 带查询参数，变成 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' }})

this.$router.replace({ // 替换，但history不会记录一条新的记录
path: '/mypath',
query: {m: 'model'},
})

路径：http://localhost:8081/#/test?name=1
<router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数)路径：http://localhost:8081/#/test/1
<router-link :to="'/test/'+id">跳转</router-link>(id是参数)

this.$route.params.id

this.$route.query.id

watch: {
obj: {
handler: function (v, o) {
},
deep: true
}
}

<template>
<article class="pageview">
{{msg}}
</article>
</template><script>
import {mapState, mapMutations} from 'vuex'
export default {
name: 'Home',
mixins: [],
components: {
},
data () {
return {
msg: 'Home',
}
},
beforeCreate () {
},
created () {
},
mounted () {
},
beforeUpdate () {
},
updated () {
},
beforeDestroy () {
},
destroyed () {
},
methods: {
},
computed: {
},
filters: {
}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style

router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title // 动态设置meta或者可以进行其他路由前的操作
}
NProgress.start() // NProgress进度条开始
next()
})router.afterEach((transition) => {
NProgress.done() // NProgress进度条结束
})

axios.interceptors.request.use((headerConfig)=> {
// 这里，发送请求之前可以设置request header
return config
},
(error) => {
// 请求错误处理
return Promise.reject(error)
})// 添加响应拦截器
axios.interceptors.response.use((response) => {
let {data} = response
// 这里，请求完成后可以对数据进行拦截处理
return data
}, (error) => {
// 响应错误处理
return Promise.reject(error)
})

proxyTable: {
'**': {
target: 'https://www.xxxx.com', // 要设置需跨域访问的接口的baseUrl，dev/qa/production
changeOrigin: true,
filter: function(pathname, req) {
const isApiDev = pathname.indexOf('/api-dev/') == 0;
const isApiTest = pathname.indexOf('/api-qa/') == 0;
const isApiProduction = pathname.indexOf('/api-production/') == 0;
return isApiDev||isApiTest||isApiProduction ;
}
}
}

proxyTable: {
'/api/resource': {
target: 'https://xxx.xxx.xxx.xxx:7070',
changeOrigin: true,
secure: false,
pathRewrite: {
'^/api/resource'': '/resource'
}
},
},

<template>
<div id="app">
<el-input v-model="text" class="text-box"></el-input>
</div>
</template><script>
export default {
name: 'App',
data() {
return {
text: 'hello'
};
}
};
</script><style lang="less" scoped>
.text-box { // 样式可以作用于el-input 组件
/deep/ input {
width: 166px;
text-align: center;
}
}
</style>

import router from './router'
import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css' // Progress 进度条样式NProgress.inc(0.2)
NProgress.configure({
easing: 'ease',
speed: 500,
showSpinner: false
})
router.beforeEach((to, from, next) => {
const isLogin = false // 是否登录
const isVip= false // 是否VIP会员
NProgress.start()
if (isLogin && isVip) {
if (to.path.indexOf('/login') !== -1 || to.path.indexOf('/order-vip') !== -1) {
next('/home')
NProgress.done()
} else {
if (to.meta.title) {
document.title = to.meta.title
}
next()
}
} else if (isLogin && !isVip) {
if (to.path.indexOf('/login') !== -1 || to.path.indexOf('/home') !== -1) {
next('/order-vip')
NProgress.done()
} else {
if (to.meta.title) {
document.title = to.meta.title
}
next()
}
} else {
if (to.path.indexOf('/login') !== -1) {
if (to.meta.title) {
document.title = to.meta.title
}
next()
} else {
next('/login') // 否则全部重定向到登录页
NProgress.done()
}
}
})router.afterEach(() => {
NProgress.done() // 结束Progress
})

build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'), // Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '', // 修改这里由“/”改为“./”或者“”

if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' // 增加相对路径，主要是针对css背景图
})

/**
* 全局变量定义
*
*/
global.USER_ID = null
global.USER_NAME = null
global.USER_MOBILE = null

import axios from 'axios'
import {
Toast,
MessageBox,
Indicator,
DatetimePicker
} from 'mint-ui'Vue.use(DatetimePicker)Vue.prototype.SUCCESS_CODE = 0
Vue.prototype.$toast = Toast
Vue.prototype.$messagebox = MessageBox
Vue.prototype.$indicator = Indicator
Vue.prototype.axios = axios

import 'babel-polyfill'

background: url(https://www.xxx.com/xxx.jpg) center center / 100% 100% no-repeat;

// 服务端代码
app.get('/xxxx.js', (req, res) => {
res.setHeader('Cache-Control', 'max-age=3600')
// ...其他输出
})

watch: {
'$route' (to, from) {
// 针对变化进行相应的处理
}
}

Node Sass could not find a binding for your current environment
This usually happens because your environment has changed since running `npm install`
Run `npm rebuild node-sass` to build the binding for your current environment

npm install --save babel-polyfill

import 'babel-polyfill' // 或者require('babel-polyfill')

computed: {
fullname: {
// getter
get: function () {
return this.firstName + this.familyName
},
// setter
set: function (newValue) {
let names = newValue.split(' ')
this.firstName = names[0]
this.familyName = names[1]
}
}
}

<my-component
ref="myComponent"
/>

this.$refs.myComponent.fn() // 比如组件上有fn这个内置方法，直接调用

router.beforeEach((to, from, next) => {
// 所有if else条件都必需提供next路由出口，不然会出现死询环（不停加载）或者路由失败（白屏的情况）
})

max-width: 10rem; /* 750px; */

axios({
url: '/api',
method: 'post',
data: {
param1:param1,
param2:param2
},
transformRequest: [function (data) {
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})

<div v-html="message">{{message}}</div>export default {
data () {
return {
message: "<h2>这里可以包含html标签<h2>"
}
}
}

methods: {
handleClick () {
setTimeout(() => {
this.$router.go(-1) // 或者其他关闭对话框事件等等
}, 0)
}
}

<script>
// Vue子组件定义事件event1
Vue.component('child-component', {
methods: {
emitEvent() {
this.$emit('event1', 'This is a event.')
}
},
mounted() {
this.emitEvent()
}
})
</script> // Vue 父组件绑定监听子组件事件event1
<template>
<div>
<child-component @event1="eventHandler" />
</div>
</template><script>
import childComponent from './child-component'
export default {
components: {
childComponent
},
methods: {
eventHandler(event) {
console.log(event)
}
}
}
</script>

mutations: {
UPDATE_STATE: (state, options) => {
// state = { ...state, ...options } // 此方式可能会更新失败
Object.keys(options).forEach((key) => { // 使用Vue.set强制更新
Vue.set(state, key, options[key])
})
}
},

let myUrl = './static/js/a.js' // build出来后是 相对于http://xxx/xx/index.html的，结果为 http://xxx/xx/static/js/a.js

// 如果要使用一张图片，可以先把img import进来再画到canvas上，
import myImg from '../../assets/my-img.png'
// ...
export default {
// ...
data () {
return {
myImg: myImg
}
},
// ...
}

/* 解决element-ui的table表格控件表头与内容列不对齐问题 */
/deep/ .el-table th.gutter {
display: table-cell !important;
}

// blob二进制方式
axios({
method: 'post',
url: '/api/exportExcel',
headers: {
'Content-Type': 'application/json'
},
data: {
token: 'xxxx',
}
}).then((res) => {
// console.log(res)
const blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' }) // application/vnd.openxmlformats-officedocument.spreadsheetml.sheet这里表示xlsx类型
const downloadElement = document.createElement('a')
const href = window.URL.createObjectURL(blob) // 创建下载的链接
downloadElement.href = href
downloadElement.download = 'xxxx.xlsx' // 下载后文件名
document.body.appendChild(downloadElement)
downloadElement.click() // 点击下载
document.body.removeChild(downloadElement) // 下载完成移除元素
window.URL.revokeObjectURL(href) // 释放掉blob对象
}).catch((error) => {
console.log(error.message)
})

<template>
<div>
<label><input type="checkbox" :checked="value" @click="change" /> 勾选我吧</label>
</div>
</template>
<script>
export default {
data() {
},
model:{
prop:'value',
event:'valueChange'
},
props:{
value: Number
},
methods:{
change(e) {
let number = 0
if(e.target.checked) {
number = 1
}
this.$emit('valueChange', number)
}
}
}</script>