使用RequireJS集成Vue时添加<style scoped>标签报错求助

看起来你遇到的问题是require-vuejs在处理带scoped样式的.vue文件时，模块加载上下文出现了冲突，导致script部分的define调用无法被RequireJS正确识别。下面是具体的排查和解决步骤：

报错原因分析 #

当你添加<style scoped>标签后，require-vuejs会尝试编译这个带作用域的样式，这个过程会改变.vue文件的模块包装逻辑，使得script中的define函数不在正确的RequireJS执行环境中，从而抛出define(...) is not a function和匿名模块不匹配的错误。

具体解决方案 #

1. 添加require-css依赖并配置 #

require-vuejs处理样式（尤其是scoped样式）需要依赖require-css来加载和处理CSS内容。首先确保你已经引入了require-css库，然后在RequireJS配置中添加：

require.config({
  paths: {
    'Vue': 'lib/vue',
    'vue': 'lib/require-vuejs',
    'vuex': 'lib/vuex',
    'es6-promises': 'lib/es6-promise.auto',
    'css': 'lib/require-css' // 指向你的require-css文件路径
  },
  shim: {
    "Vue": {
      "exports": "Vue",
      init: function() {
        // 全局暴露Vue，确保.vue文件的script能访问到
        window.Vue = this;
        return Vue;
      }
    },
    "css": {
      deps: ['require'] // 确保require-css依赖RequireJS加载
    }
  },
  // 配置require-vuejs的样式处理规则
  config: {
    vue: {
      scoped: true, // 启用scoped样式支持
      styleLoader: 'css' // 指定用require-css处理样式
    }
  }
});

2. 简化.vue组件的script写法 #

require-vuejs会自动处理.vue文件的template、script和style部分，你不需要在script中手动包裹define，直接导出组件对象即可。修改子组件的script：

// 子组件的script部分，去掉define包裹
export default {
  // 无需手动指定template，require-vuejs会自动读取<template>标签内容
}

如果坚持使用AMD的define写法，确保依赖的Vue能被正确解析，但更推荐上面的简化写法，符合vue文件的常规编写习惯。

3. 检查版本兼容性 #

确保你的依赖版本匹配：

• Vue 2.x 对应 require-vuejs 1.x版本
• 如果是Vue 3.x，require-vuejs的支持有限，可能需要调整集成方案

4. 验证渲染配置 #

修改后的渲染配置可以保持不变，但确保vue模块初始化完成后再加载组件：

define(['Vue', 'vue','vuex','es6-promises'], function (Vue, vue, vuex) {
  Vue.use(vuex);
  require(['vue!./app/views/vue/cart','./app/views/vue/store/store'], function (app,store) {
    new Vue({
      el:'#vue-app',
      store: store,
      render: function(h){
        return h(app)
      }
    })
  });
} );

完成以上步骤后，重新加载项目，应该就能正常使用<style scoped>标签而不会报错了。

内容的提问来源于stack exchange，提问作者abhirham