Question

Chrome 60和带标志的最新Firefox支持import/export指令。我想在没有NodeJS的情况下使用.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下一个代码放入： 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编写a module将.vue文件转换为.js，而不使用gulp将它们捆绑在一起。它应该可行。

Answer 2

为了处理.vue个文件，您需要vue-loader或vueify，这实际上会将它们转换为js对象供您导入。它们专门用于webpack和browserify，因此您需要使用其中一个来使用.vue文件。

我知道你说你不喜欢开销，但vue-cli webpack template可以让你在几分钟内完成。

将`.vue`文件与支持导入/导出的最新浏览器一起使用

2 个答案: