1
私はロールアップを使用してvueとtypescriptをバンドルしています。次のエラーが発生しています。ロールアップは正しくバンドルされていますが、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>
//は
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>
をapp.ts //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
ヴューがあります作業それでもエラーを示していますhttps://www.screencast.com/t/6dY52k2n
EDIT：CDNを追加しましたし、ビューからこのエラーを得た：
[Vue警告]：テンプレートコンパイラが利用できないVueのランタイム専用ビルドを使用しています。テンプレートをレンダリング関数にあらかじめコンパイルするか、コンパイラに含まれているビルドを使用してください。