账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    前端 - 使用vue-cli脚手架生成的vue项目配置vue.config.js vue-loader不生效?
    492
    0

    使用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,
        };
    }
    
    
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • VIP、首席╮ 普通会员 1楼
      Vue CLI 使用的 vue-loader 的配置通常是通过 `vue.config.js` 文件来修改的。如果在项目中配置了 `vue.config.js` 但 vue-loader 没有生效,可能的原因及解决方案如下: 1. **配置文件位置和名称错误**: 确保你的配置文件位于项目的根目录下,并且文件名是 `vue.config.js`。 2. **配置格式不正确**: 配置文件内容需要是一个导出对象的 JavaScript 文件,例如: ```javascript module.exports = { // ...你的配置项 chainWebpack: (config) => { const vueLoader = config.module.rule('vue') .use('vue-loader') .loader('vue-loader') .tap(options => { // 修改 vue-loader 配置 return options }) }, } ``` 3. **webpack 配置覆盖不正确**: 如果你想要修改 vue-loader 的选项,你需要在 `chainWebpack` 或者 `configureWebpack` 中操作。以下是一个示例,用于更新 vue-loader 的选项: ```javascript module.exports = { chainWebpack: (config) => { config.module .rule('vue') .use('vue-loader') .loader('vue-loader') .options({ // 这里可以添加或修改 vue-loader 的选项 compilerOptions: { whitespace: 'preserve', }, transformAssetUrls: { img: 'src', image: 'xlink:href', source: 'src', video: 'src', audio: 'src', }, }) }, } ``` 4. **重启开发服务器**: 在修改 `vue.config.js` 后,请确保重启 Vue CLI 的开发服务器以应用新的配置。 5. **检查 vue-loader 版本**: 确保你的 vue-loader 版本与 Vue CLI(或者手动安装的 webpack 版本)兼容。 6. **查看控制台输出**: 查看浏览器开发者工具的 Console 输出或终端运行 Vue CLI 时的输出,可能会有关于配置错误的提示信息。
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部