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

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

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    前端 - 使用vue-cli脚手架生成的vue项目配置vue.config.js vue-loader不生效?
    42
    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
    更多回答
    扫一扫访问手机版

    回答动态

    师傅被妖怪抓走了:发布了悬赏问题火爆全网的“元宇宙”到底是什么?预计能赚取 1积分收益
    酒后略带风情:发布了悬赏问题Android内存中Graphics与Code占用过高预计能赚取 10积分收益
    扛起拖把扫天下:发布了悬赏问题typescript如何导出接口配置?求解,谢谢!预计能赚取 10积分收益
    发布了悬赏问题Vue 如何改变返回页面的路径?如让B页面只能返回到A页面.预计能赚取 11积分收益
    发布了悬赏问题vue H5移动端;底部bottom固定定位,安卓弹起键盘导致页面变形如何解决?预计能赚取 10积分收益
    发布了悬赏问题请问为什么tomcat8.5 GET请求中文正常,POST请求还需要设置UTF-8.预计能赚取 10积分收益
    发布了悬赏问题vue2.5+ts创建以及引入jq的方法预计能赚取 11积分收益
    情场浪女:发布了悬赏问题import ggplot时报错module 'pandas' has no attribute 'tslib'预计能赚取 10积分收益
    见心书画许老师18753375161:发布了悬赏问题echarts3 legend禁止点击事件,允许悬浮事件预计能赚取 11积分收益
    aa_92cb0bd09f:发布了悬赏问题codewar上的一个问题预计能赚取 11积分收益