vue项目中常见问题及解决方案(推荐)


Posted in Javascript onOctober 21, 2019

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项目中常见问题及解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 添加和移除函数的通用方法
Oct 20 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
Mar 05 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
vue.js实现左边导航切换右边内容
Oct 21 #Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 #Javascript
JavaScript函数IIFE使用详解
Oct 21 #Javascript
vue实现侧边栏导航效果
Oct 21 #Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
Oct 21 #Javascript
vue-cli基础配置及webpack配置修改的完整步骤
Oct 20 #Javascript
关于Vue中axios的封装实例详解
Oct 20 #Javascript
You might like
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
vue中实现弹出层动画效果的示例代码
2020/09/25 Javascript
python 多线程应用介绍
2012/12/19 Python
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
简单了解Python中的几种函数
2017/11/03 Python
Python向MySQL批量插数据的实例讲解
2018/03/31 Python
numpy找出array中的最大值,最小值实例
2018/04/03 Python
详解如何设置Python环境变量?
2019/05/13 Python
Django实现文件上传下载
2019/10/06 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
伦敦一家西班牙童装精品店:La Coqueta
2018/02/02 全球购物
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
be2台湾单身男女交友:全球网路婚姻介绍的领导品牌
2019/10/11 全球购物
作弊检讨书1000字
2014/02/01 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
新品发布会主持词
2014/04/02 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
MySQL数据库之存储过程 procedure
2022/06/16 MySQL