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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
tbody元素支持嵌套的注意方法
Mar 24 Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
Jquery操作Ajax方法小结
Nov 29 Javascript
原生js实现吸顶效果
Mar 13 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 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
destoon之一键登录设置
2014/06/21 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
Bootstrap每天必学之基础排版
2015/11/20 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
React Router基础使用
2017/01/17 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
angularjs路由传值$routeParams详解
2020/09/05 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
2020/11/05 Javascript
微信小程序实现简单的select下拉框
2020/11/23 Javascript
[05:14]辉夜杯主赛事第二日 RECAP精彩回顾
2015/12/27 DOTA
Python正则表达式匹配HTML页面编码
2015/04/08 Python
python的keyword模块用法实例分析
2015/06/30 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
简单了解Python中的几种函数
2017/11/03 Python
python版百度语音识别功能
2019/07/09 Python
pygame实现打字游戏
2021/02/19 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
预备党员党课思想汇报
2014/01/13 职场文书
珠宝的促销活动方案
2014/08/31 职场文书
2016年春节慰问信息
2015/03/25 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
yolov5返回坐标的方法实例
2022/03/17 Python