如何配置汇总 vue3 环境答案

【问题标题】：how to configure rollup vue3 environment如何配置汇总 vue3 环境
【发布时间】：2021-02-18 13:01:09
【问题描述】：

当我使用 rollup 配置 vue3 环境时，我运行它然后使用 html 文件中的组件，它发生错误

下面的代码 rollup.config.js 这是汇总配置文件

const path = require('path')
const resolve = require('rollup-plugin-node-resolve')
const commonjs = require('rollup-plugin-commonjs')
const babel = require('rollup-plugin-babel')
const json = require('rollup-plugin-json')
const vue = require('rollup-plugin-vue')
const postcss = require('rollup-plugin-postcss')

const inputPath = path.resolve(__dirname,'./src/index.js')
const outputUmdPath = path.resolve(__dirname,'./dist/imooc.datav.js')
const outputEsPath = path.resolve(__dirname,'./dist/imooc.datav.es.js')

module.exports = {
  input:inputPath,
  output:[{
    file:outputUmdPath,
    format:'umd',
    name:'imoocDatav',
    globals: {
      vue: 'Vue'
    }
  },{
    file:outputEsPath,
    format:'es',
    globals: {
      vue: 'Vue'
    }
  }],
  plugins:[
    vue(),
    babel({
      exclude:'node_modules/**',
      presets: ["@vue/babel-preset-jsx"]
    }),
    
    resolve(),
   
    commonjs(),
    
    json(),
    // vue(),
    postcss({
      plugins:[]
    })
  ],
 external:['vue'] 
}

Test.vue 这是 vue3 组件

<template>
  <div class="text">{{ aa }}</div>
</template>

<script>
export default {
  name: 'Test',
  setup() {
    const aa = 'hello';
    return {
      aa,
    };
  },
};
</script>

<style lang="scss" scoped>
.text {
  color: red;
}
</style>

index.js 代码构成一个全局组件

import Test from './Test.vue'

export default function(Vue){
  Vue.component(Test.name,Test);
}

index.html 这是 html 文件

<!DOCTYPE html>
<html>
  <head>
    <title>imooc datav libs example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.0.0-beta.6/dist/vue.global.js"></script>
    <script src="../dist/imooc.datav.js"></script>
  </head>
  <body>
    <div id="app">
        {{message}} 
      
       <test></test>
    </div>
    
    <script>
       Vue.createApp({
         setup(){
           var message = 'hello world';
           return {
             message
           }
         }
       }).use(imoocDatav).mount('#app');
    </script>
  </body>
</html>

vue.global.js:4877 TypeError: Cannot read property 'aa' of undefined

【问题讨论】：

标签： vuejs3 rollup

【解决方案1】：

package.json 依赖：

"vue": "^3.0.0"

变化：

external:['vue']

到

external:['@vue']

这对我有用

【讨论】：