Rollup bundle正确但Vue未定义

问题描述：

我正在使用汇总与vue和typescript进行捆绑。我收到以下错误：Rollup bundle正确但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（束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的仅运行时版本。可以将模板预编译为渲染函数，也可以使用编译器包含的构建。

答

我修好了。它不工作，当我通过汇总跑VUE只移动文件，重命名，通过这个代码的输出是：

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

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

Rollup bundle正确但Vue未定义

相关推荐