Объединение пакетов корректно, но Vue не определено

Я использую rollup для объединения с vue и typescript. Я получаю следующие ошибки:

Uncaught TypeError: Cannot set property 'Vue' of undefined
Uncaught ReferenceError: Vue is not defined

Я понимаю, что это как-то связано с неправильной загрузкой Vue. У меня есть Vue над моим файлом сценария. Поэтому я не уверен, почему это происходит. Любые идеи?

Вот мои файлы:

// index.html 

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>View</title>
  <link href="~/vuecss/styles.min.css" rel="stylesheet">
</head>
<body>
  <div id="app"></div>
  <script src="~/vuejs/vendors.min.js"></script>
  <script src="~/vuejs/app.min.js"></script>
</body>
</html>

// app.ts 

import Vue from "vue";
import HelloComponent from "./hello/hello.vue";

new Vue({
  el: "#app",
  components: {
    HelloComponent
  }
});

// привет.vue

<template>
  <div>
    <input v-model="name" type="text">
    <div>{{name}}</div>
  </div>
</template>

<script lang="ts">
  import Vue from "vue";

  export default Vue.extend({
    data: { name: "World" }
  });
</script>

<style lang="scss" scoped>
  body {
    background: #303030;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 300;
    color: #fff;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
</style>

//rollup.config.vendors.js (связки vuejs)

export default {
  entry: 'node_modules/vue/dist/vue.min.js',
  dest: 'vuejs/vendors.min.js',
  format: 'iife'
}

//rollup.config.js (объединяет скрипты ts и vue)

import rollupTS from 'rollup-plugin-typescript2'
import rollupVue from 'rollup-plugin-vue'
import rollupSCSS from 'rollup-plugin-scss'
import rollupUglify from 'rollup-plugin-uglify'

export default {
  entry: 'vuesrc/app.ts',
  dest: 'vuejs/app.min.js',
  format: 'iife',

  plugins: [
    rollupTS(),
    rollupVue({
      autoStyles: false,
      styleToImports: true,
      compileTemplate: true
    }),
    rollupSCSS({
      output: 'vuecss/styles.min.css',
      outputStyle: 'compressed'
    }),
    rollupUglify()
  ]
}

Скриншот файловой структуры: https://www.screencast.com/t/GNZ8tvpvy
Vue работает, но по-прежнему показывает ошибку: https://www.screencast.com/t/6dY52k2n

РЕДАКТИРОВАТЬ: добавлен CDN и получена эта ошибка:

[Предупреждение Vue]: вы используете сборку Vue только для выполнения, где компилятор шаблонов недоступен. Либо предварительно скомпилируйте шаблоны в функции рендеринга, либо используйте сборку, включаемую компилятором.


typescript vue.js rollup
person graphettion    schedule 18.10.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я починил это. Это не сработало, когда я запускал vue через rollup, чтобы просто переместить файл, переименовать его и вывести с помощью этого кода:

//rollup.config.vendors.js (связки vuejs)

export default {
  entry: 'node_modules/vue/dist/vue.min.js',
  dest: 'vuejs/vendors.min.js',
  format: 'iife'
}
person graphettion    schedule 18.10.2017