vue-router意外導入令牌

Question

我想將Vue模板存儲到變量中，以便進行路由。

我創建了一個App.vue文件，該文件僅包含HTML標題（出於測試目的），以及一個main.js文件和一個“ import”命令，我從未在JavaScript中使用過，但是我不知道其他任何獲取模板的方法將文件的內容轉換成一個變量，知道每個文檔都這樣做。

無論如何，使用此“導入”命令，我會收到以下錯誤：“未捕獲的SyntaxError：意外的令牌導入”

這是導入行：“從'../vues/App'導入應用；”

我檢查了路徑，沒關系，但是如果您知道將模板文件的內容放入JS變量的任何其他方法，請告訴我。

感謝您的關注。

編輯：main.js

import App from '../vues/App';

new Vue({
    el: '#app',
    template: '<App/>',
    components: { App }
});

App.vue：

<template>
    <h1>Hello World!</h1>
</template>

<script>
    export default {}
</script>

Answer 1

您正在使用es6語法（import），並且您的環境僅支持es5語法。 因此，要么在您的Webpack中配置“ babel”，要么使用require而不是import

var App = require( "../vues/App" );

更新：如果您沒有安裝模塊捆綁程序，例如Webpack，它也會獲取具有依賴項的模塊並生成代表這些模塊的靜態資產，那么也會出現此錯誤。 從這里安裝： https : //webpack.js.org/guides/installation/