好久沒有寫筆記了,看著以前寫的筆記有很多不合理的地方也沒有去改正,這裏抽空記錄一個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文件裏的代碼

 1 import Vue from ‘vue‘;
 2 import vueRouter from ‘vue-router‘;
 3 Vue.use(vueRouter);
 4 const asyncCompont = path => import(`@/components/${path}`);
 5 let router = new vueRouter({
 6     mode:‘history‘,
 7     routes:[
 8         {
 9             path: ‘/home‘,
 
10             name: ‘Home‘,
11             component: () => asyncCompont(‘Home/HomePage/HomePage‘),
12             meta: {
13                 index: 1,
14             }
15         },
16     ]
17 });
18 export default router;

HomePage.vue中

 1 <template>
 2     <div class="HomePage">aaa</div>
 3
 
 </template>
 4 <script>
 5 export default {
 6     name:‘HomePage‘,
 7     data(){
 8         return{
 9 
10         }
11     },
12     methods:{
13 
14     }
15 }
16 </script>
17 <style lang="less">
18     @import ‘./HomePage.less‘;
19 </style>

HomePage.less中

1 .HomePage{
2     color: #ff0000;
3 }

當引入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莫名其妙的警告