Fork me on GitHub

vue常见问题

发表于 | 分类于 | 阅读次数:

1、vue打包后的文件，启动空白页

config/index.js文件路径

1
2
3
4
5
6
7
8
9
10
11
//...
	module.exports = {
		//...
		build: {
			//...
			assetsPublicPath: "./",   //改为相对路径
			//...
		}
		//...
	}
//...

2、打包过后背景图丢失

build/utils.js文件路径

1
2
3
4
5
6
7
8
9
10
11
12
13
//...
// Extract CSS when that option is specified
   // (which is the case during production build)
   if (options.extract) {
     	return ExtractTextPlugin.extract({
       	use: loaders,
       	publicPath:'../../',     //解决build后背景图无法显示问题
       	fallback: 'vue-style-loader'
     	})
   } else {
     	return ['vue-style-loader'].concat(loaders)
   }
 	//...

3、项目路由模式为history模式，build后空白页

默认路由模式为hash模式，但是会有一个问题就是页面的url会有个#，有点影响美观，去掉#最简单的方式就是使用history模式，但是build后会是空白页，解决方法就是1、使用默认的hash模式，2、需要后台配合做一些修改（nginx配置）

4、vue开发中，父组件添加scoped之后，父组件无法修改子组件的样式

父组件

1
2
3
4
5
6
7
8
9
10
11
12
<gHeader></gHeader>

<style>
两种写法
.g-header /deep/ span.name{

}

.g-header >>> span.time{

}
</style>

子组件

1
2
3
4
5
6
<template>
  <div class="g-header">
    <span class="name"></span>
    <span class="time"></span>
  </div>
</template>

5、自定义路径别名

build/webpack.base.js

1
2
3
4
5
6
7
8
9
10
resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'common':resolve('src/common'),
      'components':resolve('src/components'),
      'api': resolve('src/api'),
      'base':resolve('src/base')
    }

6、获取表单控件的值

通常我们可以直接使用 v-model 将表单控件与数据进行绑定，但是有时候我们也会需要在用户输入的时候获取当前值（比如：实时验证当前输入控件内容的有效性）。

这时我们可以使用@input或 @change事件绑定我们自己的处理函数，并传入 $event象以获取当前控件的输入值：

1
2
3
4
5
6
7
8
9
10
<input type="text"/>

change (e) {
  let curVal = e.target.value
  if (/^\d+$/.test(curVal)) {
    this.num = +curVal
  } else {
    console.error('%s is not a number!', curVal)
  }
}

7、使用vue-cli开发的跨域问题

config/index.js 配置proxyTable
"box-shadow效果图"
其中，taget是要访问的api的域名，配置完proxyTable后，若要访问http://apis.haoservice.com/lifeservice/chicken/duck，ajax里的url只需设为’/lifeservice/chicken/duck’(即绝对路径)即可，webpack会帮你把’/lifeservice’下的请求转发至http://apis.haoservice.com/lifeservice/chicken/duck

8、mounted钩子函数中请求数据导致页面闪屏问题

其实就是加载时机问题，放在created里会比mounted触发早一点，如果在页面挂载完之前请求完成的话就不会看到闪屏了