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
10resolve: {
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
其中,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触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了