在支持导入/导出的最新浏览器中使用`.vue`文件
[英]Using `.vue` files with latest browsers that support import/export
问题描述
Chrome 60 and latest Firefox with flags have support import/export directives. 
Chrome 60和带有标志的最新Firefox具有支持import/export指令。 I would like to use .vue files without NodeJS, but I can't figure out how to do it. 我想在没有.vue情况下使用.vue文件，但是我不知道该怎么做。
import/export works fine with .js files, but when I am trying to do it with .vue I am getting fail. import/export可以与.js文件一起正常工作，但是当我尝试使用.vue进行操作时，我会失败。
My code: 我的代码：
<!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>
for start I tried to place in c.vue next code: export const myc = "ccc"; 首先，我尝试在c.vue中c.vue下一个代码： export const myc = "ccc";
But I got error: GET http://localhost:8082/c.vue . 但我收到错误消息： GET http://localhost:8082/c.vue 。
Is it's possible to place there content like: 是否可以在此处放置以下内容：
<template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome!'
}
},
components: {}
}
</script>
2 个解决方案
解决方案1
2 已采纳 2017-06-13 12:18:34
As said in the comment, even modern browsers are unable to read .vue files, and that's very unlikely to change in the future. 如评论中所述，即使是现代浏览器也无法读取.vue文件，并且将来不太可能更改。 So you should should use some build tool to convert .vue to .js. 因此，您应该使用一些构建工具将.vue转换为.js。 For bundle solutions, see the other answers. 有关捆绑包解决方案，请参见其他答案。
If for some reason you don't want to bundle them (the only serious reason I can see for it is for fun & test / pure electron release, actually, but anyway), I may have another solution. 如果出于某种原因您不想捆绑它们（实际上，我能看到的唯一的严肃原因是为了娱乐和测试/纯电子释放，但无论如何），我可能有另一种解决方案。
I didn't tested it for your particular use case (native import/export in browser), but I wrote a module using vueify to convert .vue files into .js, without bundling them, using gulp. 我没有针对您的特定用例（浏览器中的本机导入/导出）对其进行测试，但是我编写了一个模块，使用vueify将.vue文件转换为.js，而无需使用gulp捆绑它们。 It should probably work. 它可能应该工作。
解决方案2
1 2017-06-13 11:17:53
In order to process .vue files you need vue-loader or vueify , which essentially turns them into a js object for you to import. 为了处理.vue文件，您需要vue-loader或vueify ，这实际上将它们转换为js对象供您导入。 They're built specifically for use with webpack and browserify so you need to use one of those to use .vue files. 它们是专门为与webpack和browserify结合使用而构建的，因此您需要使用其中之一来使用.vue文件。
I know you said you don't like the overhead but the vue-cli webpack template can have you going in minutes. 我知道您说过您不喜欢这些开销，但是vue-cli Webpack模板可以让您在几分钟之内完成任务。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.