使用vue-cli脚手架生成的vue项目配置vue.config.js vue-loader不生效？

  • Z时代
  • 2024-02-20
  • 分类：IT

使用vue-cli脚手架生成的vue项目。没有build文件夹，没法配置webpack.base.conf.js。
通过vue.config.js配置webpack配置configureWebpack vue-loader不生效。希望通过vue-loader的preLoaders用自己写的loader处理html。已安装vue-loader15版本。

webpack的配置项

module.exports = {

lintOnSave: false,
publicPath: BASE_URL,
configureWebpack: (config) => {
    const output = {
        // 把应用打包成 umd 库格式
        library: `${name}`,
        libraryTarget: 'umd',
        jsonpFunction: `webpackJsonp_${name}`,
    };
        // 为生产环境修改配置...
        // config.mode = 'development';
        let output2 = {
            ...output,
            devtoolModuleFilenameTemplate: 'webpack://[namespace]/[resource-path]'
        }
        return {
            output: output2,
            module: {
                rules: [{
                    test: /\.less$/,
                    use: [
                        'less-loader',
                        {
                            loader: require.resolve('px2rem-loader'),
                            options: {
                                remUnit: 14, // 这里是因为给的设计图是按照768*1024pad的尺寸来的，因此设置啦这个单位，一般750手机设计图单位设置为75
                            },
                        },
                    ],
                },
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                    options: {
                        // `loaders` 覆盖默认 loaders。
                        // 以下配置会导致所有无 `lang` 特性的 `<script>` 标签加载 `coffee-loader`
                        // loaders: {
                        //     js: 'coffee-loader',
                        //     css: ExtractTextPlugin.extract({
                        //         use: 'css-loader',
                        //         fallback: 'vue-style-loader' // <- 这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装
                        //     })
                        // },
                        // `preLoaders` 会在默认 loaders 之前加载。
                        // 你可以用来预处理语言块——一个例子是用来处理构建时的 i18n
                        preLoaders: {
                            // js: '/path/to/custom/loader',
                            html: path.resolve('build/preLoader-makeId.js')
                        },
                        // `postLoaders` 会在默认 loaders 之后加载。
                        //
                        // - 对于 `html`, 默认 loader 返回会编译为 JavaScript 渲染函数
                        //
                        // - 对于 `css`, 由`vue-style-loader` 返回的结果通常不太有用。使用 PostCSS 插件将会是更好的选择。
                        // postLoaders: {
                        //     html: 'babel-loader'
                        // },
                        // `excludedPreLoaders` 应是正则表达式
                        // excludedPreLoaders: /(eslint-loader)/
                    }
                }
                ],
            },
            plugins: [
                new VueLoaderPlugin()
            ]
        };
     return {
        output,
    };
}

回答：

path.resolve的路径是不是有问题，path.resolve('build/preLoader-makeId.js')你是不是把loader放在项目根路径的build目录下了，应该配置path.resolve(__dirname, 'build/preLoader-makeId.js')，或者把这个loader放到src目录下，使用相对路径解析，比如放在src/loaders下面，然后配置path.resolve('./loaders/preLoader-makeId.js')

以上是 使用vue-cli脚手架生成的vue项目配置vue.config.js vue-loader不生效？ 的全部内容， 来源链接： utcz.com/p/933172.html

回到顶部