VueJS 和 FontAwesome 导入 - 未找到模块：错误：无法解析 '@fortawesome/fontawesome-svg-core'

Posted 2023-02-22

【中文标题】VueJS 和 FontAwesome 导入 - 未找到模块：错误：无法解析 \'@fortawesome/fontawesome-svg-core\'

【英文标题】：VueJS and FontAwesome Import - Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core'VueJS 和 FontAwesome 导入 - 未找到模块：错误：无法解析 '@fortawesome/fontawesome-svg-core'

【发布时间】：2020-04-21 11:18:34

【问题描述】：

Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core' in '/project/src/plugins'

一直在尝试跟进本教程 (https://blog.logrocket.com/full-guide-to-using-font-awesome-icons-in-vue-js-apps-5574c74d9b2d/) 以将我当前的 fontawesome (4.0.7) 升级到我项目中的最新 5.0.12 版本，但一直收到此错误，很明显该项目是找不到库。

我用过

npm install --save @fortawesome/fontawesome-svg-core 
npm install --save @fortawesome/free-solid-svg-icons 
npm install --save @fortawesome/vue-fontawesome

src/plugins/font-awesome.js

import Vue from 'vue'

import  library  from '@fortawesome/fontawesome-svg-core'
import  faCoffee  from '@fortawesome/free-solid-svg-icons'
import  FontAwesomeIcon  from '@fortawesome/vue-fontawesome'

library.add(faCoffee)

Vue.component('font-awesome-icon', FontAwesomeIcon)

main.js

/* ============
 * Main File
 * ============
 *
 * Will initialize the application.
 */

import Vue from 'vue';

/* ============
 * Plugins
 * ============
 *
 * Import and bootstrap the plugins.
 */

import './plugins/vuex';
import './plugins/axios';
import  i18n  from './plugins/vue-i18n';
import  router  from './plugins/vue-router';
import './plugins/vuex-router-sync';
import './plugins/bootstrap';
import './plugins/font-awesome';
import './plugins/moment';
import './plugins/vuelidate';
import './plugins/scrollto';
import './plugins/filters';
import './plugins/casl';

// Theme css imports
import './assets/css/application.scss';


/* ============
 * Main App
 * ============
 *
 * Last but not least, we import the main application.
 */

import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

store.dispatch('auth/check');

/* eslint-disable no-new */
new Vue(
  /**
   * Bind the Vue instance to the html.
   */
  el: '#app',

  /**
   * The localization plugin.
   */
  i18n,

  /**
   * The router.
   */
  router,

  /**
   * The Vuex store.
   */
  store,

  /**
   * Will render the application.
   *
   * @param Function h Will create an element.
   */
  render: h => h(App),
);

其他插件工作正常，该文件夹实际上存在于 node_modules 上。 我应该尝试其他任何方法来解决这个问题吗？

【问题讨论】：

这是他们文档中的错字。 fontawesome 不是 fortawesome。字体不是堡垒。

@KubwimanaAdrien 我希望是，这就是 repo 的实际名称 (github.com/FortAwesome/Font-Awesome)

我刚刚检查了教程你应该将这些包导入你的 main.js 而不是你的 font-awesome.js 现在因为你想使用 font-awesome.js 我假设目录也会改变.也许你需要在路径前加上 ../ 或类似的东西

感谢@laserany，我也试过了，我得到了Module not found: Error: Can't resolve '@fortawesome/fontawesome-svg-core' in '/project/src' 那是main.js 文件夹，它仍然没有找到它。

【参考方案1】：

npm install --save @fortawesome/fontawesome-free

【讨论】：

看cmets这个答案也是错的。

【参考方案2】：

我遇到了同样的问题

webpack css-loader 不支持 （scss 和 .css 捆绑） 你需要 sass 来做

只需安装 sass-loader 和 node-sass（阅读下面的注释）

npm install -D sass-loader node-sass<----------------see below note before install--------------

网络包

module.exports = 
  module: 
    rules: [
        
        test: /\.(sass|scss|css)$/,<-----------------------note placed scss /css---------
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'<--------------------this is you need----------------
        ]
      
    ]
  ,
  // plugin omitted

注意：人们在安装 npm install -d sass-loader 时会出错，但是 sass-loader 带来了最新版本的 sass 意味着你得到了 sass-loader:11.0.0 或更高版本，所以 webpack 4 不支持最新版本的 sass-loader.sass 加载器webpack 5 以上为 11。

解决方案

你的 webpack 版本是 4，所以你只需要低于 sass loader 版本 10

npm install -D node-sass
npm install -D sass-loader@^10 <-----------importent step

我的网络包

const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const webpack = require('webpack')

module.exports = 
    entry: './src/main.js',
    module: 
        rules: [
                test: /\.js$/,
                use: 'babel-loader'
            ,
            
                test: /\.vue$/,
                use: 'vue-loader'
            ,
            
                test: /\.(sass|scss|css)$/,
                use: ['vue-style-loader', 'css-loader','sass-loader'],
              
            ,
           
        ]
    ,
    devServer: 
        open: true,
        hot: true
    ,
    plugins: [
        new HtmlWebpackPlugin(
            template: './src/index.html',
        ),
        new VueLoaderPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],