Question

我使用汇总来捆绑vue和打字稿。我收到以下错误：

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（bundles 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的仅运行时版本，其中模板编译器不可用。将模板预编译为渲染函数，或使用包含编译器的构建。

Answer 1

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

// rollup.config.vendors.js（bundles vuejs）

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

Rollup捆绑正确，但Vue未定义

1 个答案: