rollup 如何按需引用或者说使用 element-ui ？

Question

我设置了

...
globals: { vue: 'Vue', 'element-ui': 'elementUi' }
...
external: ['vue', 'element-ui']

编译提示

(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
element-ui/lib/option (imported by src\components\Attrs\src\components\Screen.vue?rollup-plugin-vue=script.js)
element-ui/lib/select (imported by src\components\Attrs\src\components\Screen.vue?rollup-plugin-vue=script.js)
element-ui/lib/theme-chalk/select.css (imported by src\components\Attrs\src\components\Screen.vue?rollup-plugin-vue=script.js)
element-ui/lib/theme-chalk/option.css (imported by src\components\Attrs\src\components\Screen.vue?rollup-plugin-vue=script.js)
element-ui/lib/theme-chalk/base.css (imported by src\components\Attrs\src\components\Screen.vue?rollup-plugin-vue=script.js)
(!) Unused external imports
default imported from external module 'element-ui/lib/theme-chalk/select.css' but never used
default imported from external module 'element-ui/lib/theme-chalk/option.css' but never used
(!) Missing global variable names
Use output.globals to specify browser global variable names corresponding to external modules
element-ui/lib/option (guessing '_Option')
element-ui/lib/select (guessing '_Select')

使用

import { Select, Option } from 'element-ui'

Answer 1

穆桂英_俊主 2021-02-01 11:35:41

请问解决了吗？我也遇到同样的问题，不过这里引入的vue和element应该不是同一种插件，感觉这么引应该是不对，如果你解决了，可以分享一下吗？谢谢

• 穆桂英_俊主 #1

  我这边试了一下，不用再配置文件中配置elementui，直接npm安装-save-dev,然后在js中引入，在vue页面中直接使用就可以
  
  -----------------------------------------------------
  Search/index.js/
  import Search from './search.vue'
  import Element from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  
  export default function(Vue) {
      Vue.component(Search.name, Search)
      Vue.use(Element)
  }
  
  ---------------------------------------------------
  Search/search.vue
  
  <template>
      <div class="cur-table-searchBar">
          <el-button>button</el-button>
      </div>
  </template>
  <script>
  export default {
      name: "search",
      data: function () {
          return {}
      }
  }
  </script>
  
  ----------------------------------------------------
  src/index
  import Text from './components/Text1/index'
  import Text2 from './components/Text2/index'
  import Text3 from './components/Text3/index'
  import Search from './components/Search/index'
  
  export default function(Vue) {
      Vue.use(Text)
      Vue.use(Text2)
      Vue.use(Text3)
      Vue.use(Search)
  }
  ------------------------------------------------
  build后在项目中seach组建button按钮使用成功
  正在尝试按需加载中

Answer 2

扬_灵 2020-11-09 17:48:37

同学你好，可以把完整项目上传一下吗，我在本地帮你定位一下问题。