Rollup 打包正确，但 Vue 未定义答案

【问题标题】：Rollup bundles correctly but Vue is undefinedRollup 打包正确，但 Vue 未定义
【发布时间】：2018-03-30 17:53:33
【问题描述】：

我正在使用汇总与 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
  }
});

// hello.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

【解决方案1】：

我修好了。当我通过汇总运行 vue 以移动文件、重命名并通过以下代码输出时，它不起作用：

//rollup.config.vendors.js（捆绑vuejs）

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

【讨论】：