您可能需要适当的加载器来处理此文件类型,目前没有配置加载器来处理此文件。"

2022-08-08 00:00:00 vue.js webpack node-modules loader

我当前在运行代码时遇到以下错误。

 ERROR in ./node_modules/vue-phone-number-input/dist/img/flags.9c96e0ed.png 1:0 Module parse 
 failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this 
 file type, currently no loaders are configured to process this file. See 
 https://webpack.js.org/concepts#loaders (Source code omitted for this binary file) ne-number- 
 input.css @ ./node_modules/vue-phone-number-input/dist/vue-phone-number-input.css 
 (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-phone-number-input/dist/vue-phone- 
 number-input.css) 4:36-71 @ ./node_modules/vue-phone-number-input/dist/vue-phone-number- 
 input.css @ ./src/main.js

我尝试了Google上建议的几种解决方案,但仍然无法解决错误。

以下是代码示例:

let webpack = require('webpack'),
path = require('path'),
{VueLoaderPlugin} = require('vue-loader');

console.log( path.resolve(__dirname, './public'));

module.exports = {
entry: "./src/main.js",

output: {
    path: path.resolve(__dirname, 'public/js'),
    filename: 'app.js',
    //publicPath: './public'
    publicPath: 'https://cdn.example.com/assets/', // CDN (always HTTPS)
    publicPath: '//cdn.example.com/assets/', // CDN (same protocol)
    publicPath: '/assets/', // server-relative
    publicPath: 'assets/', // relative to HTML page
    publicPath: '../assets/', // relative to HTML page
    publicPath: '', // relative to HTML page (same directory)
},

resolve: {
    alias: {
        '@app': path.resolve(__dirname, './src'),
        'vue$': 'vue/dist/vue.esm.js'
    }
},

module: {
    rules: [
        {
            test: /.vue$/,
            use: [
                { loader: 'vue-loader' }
            ],
        },
        {
            test: /.css$/i,
            use: ['style-loader', 'css-loader'],
        }
    ]
},

plugins: [
    new VueLoaderPlugin()
]
};

有人能在这方面帮助我吗?

提前谢谢您。

png

在您的模块部分下,您需要为推荐答案文件添加一个处理程序。也许是文件加载器?https://www.npmjs.com/package/file-loader

相关文章