vue-cli莫名其妙的警告
好久没有写笔记了,看着以前写的笔记有很多不合理的地方也没有去改正,这里抽空记录一个vue-cli莫名其妙的警告,虽然现在我也是一脸懵逼,但是还好把问题处理了.
出现的的问题是:
项目运行时出现警告
This relative module was not found:
* ./Home/HomePage/HomePage.less in ./src/components lazy ^\.\/.*$,
但是less是起作用了的.
这个问题百度也没有百度出来,折腾了半天,只好自己想办法,还好在群里热心大佬们耐心的帮我找问题,给了我很多提示,最终解决掉,在这里还要感谢群里的大佬们.
项目用的vue-cli,less,lib-flexible,px2rem-loader
先贴代码;
这是目录结构:
这是router.js文件里的代码
import Vue from 'vue';
import vueRouter from 'vue-router';
Vue.use(vueRouter);
const asyncCompont = path => import(`@/components/${path}`);
let router = new vueRouter({
mode:'history',
routes:[
{
path: '/home',
name: 'Home',
component: () => asyncCompont('Home/HomePage/HomePage'),
meta: {
index: 1,
}
},
]
});
export default router;
HomePage.vue中
<template>
<div class="HomePage">aaa</div>
</template>
<script>
export default {
name:'HomePage',
data(){
return{ }
},
methods:{ }
}
</script>
<style lang="less">
@import './HomePage.less';
</style>
HomePage.less中
.HomePage{
color: #ff0000;
}
当引入HomePage.less时,npm中出现警告
开始以为是配置原因,找了很久,比对以前做的项目都没问题,
后来在控制台看见提示
以为是没有安装style-loader,然后我就安装了他,结果报一堆错误出来,吓得我赶快又把他卸载了,
后来群里的大佬提示可能路由文件router.js里面的写法有问题,当时在想以前的项目都是这么写的都没问题,但是说loader版本都不一样,不能拿以前的项目来比对,想想也有道理.
这里也提醒一下,同样的写法以前的项目没问题,并不说明下一个项目这样写也一样没问题,因为各种插件更新换代太快,
后来把router.js改成这样
import Vue from 'vue';
import vueRouter from 'vue-router';
Vue.use(vueRouter);
let router = new vueRouter({
mode:'history',
routes:[
{
path: '/home',
component: r => require(['../components/Home/HomePage/HomePage'], r) // 异步加载组件
},
]
});
export default router;
,果然警告就没有了.
虽然只是处理一个小小的警告,本人愚钝,也折腾了一两小时,在这个追求高效率,高质量的的年代,时间就等于金钱啊.
不过目前也并不太清楚这个为什么会出现这个警告,还望知道的大佬们留言
vue-cli莫名其妙的警告的更多相关文章
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- Vue CLI 创建项目
使用命令创建VUE项目 运行以下命令[vue create [项目名]]来创建一个新项目: vue create hello-world 警告 如果你在 Windows 上通过 minTTY 使用 G ...
- Vue CLI 介绍安装
https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...
- Vue CLI 3搭建vue+vuex 最全分析
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
- 前端——Vue CLI 3.x搭建Vue项目
一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...
- @vue/cli 4.0.5 学习记录
1. Vue CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的 vue 命令.Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli ...
- vue cli 3.x 项目部署到 github pages
github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
随机推荐
- QtGui实现计算圆的面积
dialog.h #ifndef DIALOG_H #define DIALOG_H #include <QtWidgets/QDialog> #include <QtWidgets ...
- 懒人必备,IntelliJ IDEA中代码一键生成
之前有不少小伙伴问松哥微人事项目(https://github.com/lenve/vhr)使用的 MyBatis 逆向工程在哪里?其实旧版微人事当时没有使用逆向工程,是我自己手动敲出来的,当然手动敲 ...
- 在4K屏下以超过VMWare默认的最高分辨率运行Linux系统
前言 4K 屏,有其优点也有其弊端.优点就是分辨率高,字体和图标看起来如丝一般顺滑:缺点就是字体和图标小,费眼睛.解决这个缺点的方法也很简单粗暴,就是将系统的显示比例放大.在高分屏不很普及的时候,无论 ...
- C# 接口和继承
转:https://www.cnblogs.com/songhe123/p/9558545.html 接口是方法的抽象,如果不同的类有同样的方法,那么就应该考虑使用接口. 例1: using Syst ...
- Codeforces 1248C Ivan the Fool and the Probability Theory(推公式)
题意 一个n*m的网格图,每个格子可以染黑色.白色,问你每个格子最多有一个相邻颜色相同的方案数 n,m<=1e5 思路 我们先处理\(1 \times m\)的情况 设\(f[i][j]\)为前 ...
- sqlserver install on linux chapter two
The previous chapter is tell us how to install sqlerver on linuix Today, we will see how to make it ...
- layui父子页面方法互调
父级页面调用子页面方法 layer.open({ type: 2, content: 'test/iframe.html', success: function(layero, index){ var ...
- 校招必看硬核干货:C++怎么学才能进大厂
目录 关于小猿 如何找资料 自我定位 岗位需求 学习路线及时间安排 资料获取方式 C++语言在历史舞台上出现了不短的时间,虽然一直面临着Python,Go等新语言的挑战,但它在基础架构和大型软件上的优 ...
- 高并发之——不得不说的线程池与ThreadPoolExecutor类浅析
一.抛砖引玉 既然Java中支持以多线程的方式来执行相应的任务,但为什么在JDK1.5中又提供了线程池技术呢?这个问题大家自行脑补,多动脑,肯定没坏处,哈哈哈... 说起Java中的线程池技术,在很多 ...
- Keras深度学习框架之损失函数
一.损失函数的使用 损失函数[也称目标函数或优化评分函数]是编译模型时所需的两个参数之一. model.compile(loss='mean_squared_error', optimizer='sg ...