在支持導入/導出的最新瀏覽器中使用`.vue`文件

Question

Chrome 60和帶有標志的最新Firefox具有支持import/export指令。 我想在沒有.vue情況下使用.vue文件，但是我不知道該怎么做。

import/export可以與.js文件一起正常工作，但是當我嘗試使用.vue進行操作時，我會失敗。

我的代碼：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <script src="https://unpkg.com/vue"></script>

    <script type="module">  
        import {myc} from './c.vue';
    </script>

</head>
<body>

</body>
</html>

首先，我嘗試在c.vue中c.vue下一個代碼： export const myc = "ccc";

但我收到錯誤消息： GET http://localhost:8082/c.vue 。

是否可以在此處放置以下內容：

<template>
  <div id="app">
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome!'
    }
  },
  components: {}
}
</script>

Answer 1

如評論中所述，即使是現代瀏覽器也無法讀取.vue文件，並且將來不太可能更改。 因此，您應該使用一些構建工具將.vue轉換為.js。 有關捆綁包解決方案，請參見其他答案。

如果出於某種原因您不想捆綁它們（實際上，我能看到的唯一的嚴肅原因是為了娛樂和測試/純電子釋放，但無論如何），我可能有另一種解決方案。

我沒有針對您的特定用例（瀏覽器中的本機導入/導出）對其進行測試，但是我編寫了一個模塊，使用vueify將.vue文件轉換為.js，而無需使用gulp捆綁它們。 它可能應該工作。

Answer 2

為了處理.vue文件，您需要vue-loader或vueify ，這實際上將它們轉換為js對象供您導入。 它們是專門為與webpack和browserify結合使用而構建的，因此您需要使用其中之一來使用.vue文件。

我知道您說過您不喜歡這些開銷，但是vue-cli Webpack模板可以讓您在幾分鍾之內完成任務。

在支持導入/導出的最新瀏覽器中使用`.vue`文件

問題描述

2 個解決方案

解決方案1
2 已采納 2017-06-13 12:18:34

解決方案2
1 2017-06-13 11:17:53

在支持導入/導出的最新瀏覽器中使用`.vue`文件

問題描述

2 個解決方案

解決方案1 2 已采納 2017-06-13 12:18:34

解決方案2 1 2017-06-13 11:17:53

解決方案1
2 已采納 2017-06-13 12:18:34

解決方案2
1 2017-06-13 11:17:53