vue项目中常见问题及解决方案(推荐)
作者:邹琼俊 发布时间:2024-04-26 17:37:47
标签:vue,webpack,scss
webpack项目中自动引入全局scss变量文件
假设我们有一个公共的scss变量文件variables.scss
/*存放所有全局变量*/
$card-title:#C7D200; //首页 卡片标题颜色
$bc-color:#182037;
$hoverColor: #7abef9; //链接hover颜色
$fontColor: #E6EFFF; //字体颜色-白色
webpack要识别scss,需要先安装sass的loader
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass
在页面中需要用到这些自定义变量的时候,每次都需要显示引入:
@import '@/assets/scss/variables.scss';
这样操作起来非常麻烦,我们可以通过sass-resources-loader
来自动引入。
sass-resources-loader
可以访问sass资源任何一个需要访问的sass模块。所以,可以使用共享变量和混合所有SASS样式,而不去每个文件都引用。安装:
npm install --save-dev sass-resources-loader
然后在 build 文件夹下找到 util.js 修改sass编译器loader的配置,直接把下面的代码复制进去即可:
// 全局文件引入 当然只想编译一个文件的话可以省去这个函数
function resolveResource(name) {
return path.resolve(__dirname, '../src/assets/scss/' + name);
}
function generateSassResourceLoader() {
var loaders = [
cssLoader,
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// 多个文件时用数组的形式传入,单个文件时可以直接使用 path.resolve(__dirname, '../src/assets/scss/variables.scss'
resources: [resolveResource('variables.scss')] //variables
}
}
];
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
});
} else {
return ['vue-style-loader'].concat(loaders);
}
}
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
// vue-cli默认sass配置
// sass: generateLoaders('sass', { indentedSyntax: true }),
// scss: generateLoaders('sass'),
// 新引入的sass-resources-loader
sass: generateSassResourceLoader(),
scss: generateSassResourceLoader(),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
};
......
vue-cli3 一直运行 /sockjs-node/info?t= 解决方案
D:\WorkSpace\ui-admin\node_modules\sockjs-client\dist\sockjs.js,找到代码1601行,注释掉代码self.xhr.send(payload);
try {
//self.xhr.send(payload);
} catch (e) {
这样就可以了
解决vue中的NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}
在引入vue-router的界面中添加如下代码:
const originalPush = Router.prototype.push;
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
};
总结
以上所述是小编给大家介绍的vue项目中常见问题及解决方案,网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
来源:https://www.cnblogs.com/jiekzou/archive/2019/10/21/11011271.html
0
投稿
猜你喜欢
- 引言最近python语言大火,除了在科学计算领域python有用武之地之外,在游戏、后台等方面,python也大放异彩,本篇博文将按照正规的
- 背景:pytest以特定规则搜索测试用例,所以测试用例文件、测试类以及类中的方法、测试函数这些命名都必须符合规则,才能被pytest搜索到并
- CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position。1. positio
- pandas 对于数据分析的人员来说都是必须熟悉的第三方库,pandas 在科学计算上有很大的优势,特别是对于数据分析人员来说,相当的重要。
- 这篇文章主要介绍了Python argparse模块使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
- 首先,我们看看models.py里的模型,有个upload_to参数,为了和过去一刀两断,楼主决定给upload_to赋值一个新的值叫ava
- 前言进程之间通信与线程同步是一个历久弥新的话题,对编程稍有了解应该都知道,但是细说又说不清。一方面除了工作中可能用的比较少,另一方面就是这些
- 如何一行输入多个数,并存入列表在python里,如果你仅使用input()的话是输入一行的内容并将该行的内容以字符串的形式存到变量中,但如果
- 1. 原先的配置 把 fckeditor/filemanager/connectors 目录删除; 有同学可能会问了,都删除了怎么上传文件?
- 本文实例讲述了Python实现查找两个字典相同点的方法。分享给大家供大家参考,具体如下:问题:寻找两个字典中间相同的地方(相同的键、相同的值
- 特殊方法一览在 Python 的学习和使用过程中, 你一定碰到过一些 特殊方法, 它们开头和结尾都有两条下划线, 也叫魔法方法 (Magic
- 方法一一般情况下,SQL数据库的收缩并不能很大程度上减小数据库大小,其主要作用是收缩日志大小,应当定期进行此操作以免数据库日志过大1、设置数
- 只要把下面代码放到index.asp或者default.asp中,只要在首页代码顶部引用call Check_Wap(),这个也是我的工程中
- 在MyEclipse中JSON字符串的换行值是不同的,必须以'/n'换行,如果只是json验证的问题,可以把json的验证关
- 本文实例讲述了php实现的微信分享到朋友圈并记录分享次数功能。分享给大家供大家参考,具体如下:1.引入JS文件2.通过config接口注入权
- 本文主要介绍了一个将 MongoDB 中的数据导入到 MySQL 中的 Python 工具类 MongoToMysql。该工具类实现了获取
- 一、Flowable数据库表命名规则ACT_RE_*:’RE’表示repository(存储)。Re
- 简单展示如何利用python中的pandas库创建、读取、修改CSV数据文件1 写入CSV文件import numpy as npimpor
- 模块概述如果说模块是按照逻辑来组织 Python 代码的方法, 那么文件便是物理层上组织模块的方法。 因此, **一个文件被看作是一个独立模
- 这篇文章主要介绍了python Pillow图像处理方法汇总,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需