vue常见问题
# Invalid Host header
npm run serve 出现 Invalid Host header
在vue.config.js中配置
module.exports = {
devServer: {
disableHostCheck: true
}
}
1
2
3
4
5
2
3
4
5
# 在 methods 中使用过滤器 filter
# 访问全局过滤器
<template>
<div>
<span>过滤:{{'size' | dataFilter}}</span>
<button @click="transformation">调用全局过滤器</button>
</div>
</template>
<script>
import Vue from 'vue';
export default {
methods: {
// 使用过滤的方法
transformation() {
// 使用Vue.filter('过滤器名称') 方式获取全局中要使用的过滤器
let dataFilter = Vue.filter('dataFilter');
dataFilter('size'); // 对size进行数据过滤
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 访问本地过滤器
<template>
<div>
<span>过滤:{{'size' | dataFilter}}</span>
<button @click="transformation">调用本地过滤器</button>
</div>
</template>
<script>
export default {
filters: {
dataFilter(val) {
console.log('本地过滤器',val)
}
},
methods: {
// 使用过滤的方法
transformation() {
// 使用this.$options.filters[]方式获取本地过滤器
let dataFilter = this.$options.filters['dataFilter'];
dataFilter('size'); // 对size进行数据过滤
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 全局引入sass变量
使用到 sass-resources-loader 加载器
npm i -D sass-resources-loader
1
// vue.config.js
module.exports = {
chainWebpack: (chain) => {
const oneofsMap = chain.module.rule('scss').oneOfs.store
oneofsMap.forEach(item=>{
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
resources: './src/styles/variables.scss',
})
})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# svg批量引入
npm install svg-sprite-loader -D
1
# 配置
module.exports = {
chainWebpack(config) {
// 修改当前项目默认svg 配置，排除icons目录
config.module.rule('svg')
.exclude.add(resolve('./src/icons'))
// 新增一个 rule：添加icons 里面svg
config.module.rule('icons')
.test(/\.svg$/)
.include.add(resolve('./src/icons')).end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({symbolId: 'icon-[name]'})
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 创建icons/index.js
// icons/index.js
// webpack 创建一个以svg 目录为上下文的require函数
import Vue from 'vue'
import SvgIcon from '@components/SvgIcon.vue'
// 注册svg 组件
Vue.component(SvgIcon.name, SvgIcon)
const req=require.context('./svg',false,/\.svg$/)
req.keys().map(req);// keys() 会获取所有svg 文件
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 创建SvgIcon组件
<template>
<svg :class="svgClass" aria-hidden="true">
<use :xlink:href="iconName"/>
</svg>
</template>
<script>
export default {
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
},
computed: {
iconName() {
return `#icon-${this.iconClass}`
},
svgClass() {
if (this.className) {
return 'svg-icon ' + this.className
} else {
return 'svg-icon'
}
}
}
}
</script>
<style scoped>
.svg-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# 使用组件
<svg-icon icon-class="qiqiu" />
1
# 设置项目模板信息
// vue.config.js
module.exports = {
...
configureWebpack: (config) => {
// config.plugins.push(new BundleAnalyzerPlugin())
config.plugins.forEach((val) => {
if (val instanceof HtmlWebpackPlugin) {
val.options.title = "项目名称"; // 修改输出文件名,<%= htmlWebpackPlugin.options.title %>
// 指定模板
val.options.template = path.resolve(__dirname, 'public', process.env.NODE_ENV === 'development' ? 'dev.html' : 'index.html')
}
});
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# vscode setup引入组件提示组件未使用等波浪线提示
禁用Vetur使用Vue Language Features (Volar)
# vue-router访问相同地址报错
Avoided redundant navigation to current location:，多次执行会抛出NavigationDuplicated的警告错误是因为vue-router3版本之后 底层引入了promise。而我们通过声明式导航没有出现此类问题是因为vue-router底层已经处理好了。
在我们使用编程式导航时，通过给push或replace方法传递相应的成功和失败的回调函数可以捕获到当前的错误解决此问题
//编程式导航, 添加 ()=>{},()=>{} 解决此问题
this.$router.push({ name:'/' }, ()=>{}, ()=>{})
1
2
2
也可以修改原型方法达到一劳永逸
const originPush = VueRouter.prototype.push
VueRouter.prototype.push = function(location, resolve, reject) {
if (resolve && reject) {
originPush.call(this, location, resolve, reject)
} else {
originPush.call(this, location, () => {}, () => {})
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
上次更新: 2023/09/22, 16:54:32