2017-06-13 7 views
0

クロム60とフラグを持つ最新のFirefoxには、import/exportディレクティブがサポートされています。私はNodeJSなしで.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次のコードに配置してみました: export const myc = "ccc";

しかし、私はエラーました:GET http://localhost:8082/c.vueを。インポートするために、本質的にjsオブジェクトにそれらを回すあなたがvue-loaderまたはvueify必要.vueファイルを、処理するために

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

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

'import/export'のサポートは、それらのブラウザが' .vue'ファイルもサポートしているわけではありません。 VueJSはカスタムフレームワークであり、公式の技術ではありません。 –

+0

それを稼働させるためのハックはありますか? –

+0

webpack/browserifyを使用できませんか? Afaikはあなたの問題を解決するために作られたもので、最新のブラウザーやフラグは必要ありません。 –

答えて

1

コメントによると、最新のブラウザでも.vueファイルを読み取ることができず、将来変更する可能性はほとんどありません。したがって、.vueを.jsに変換するためのビルドツールを使用する必要があります。バンドルソリューションについては、他の回答を参照してください。

何らかの理由でバンドルしたくないのであれば(実際には&のテスト/純粋な電子リリースであることがわかります)、別の解決方法があるかもしれません。

私は特定のユースケース(ブラウザでのネイティブインポート/エクスポート)でテストしませんでしたが、vueifyを使用して.vueファイルをバンドルせずに.jsに変換してgulpを使用して書きました。それはおそらく動作するはずです。

1

は、それがのようにそこにコンテンツを配置することができますです。これらはwebpackとbrowserifyで使用するために特別に構築されているので、.vueファイルを使用する必要があります。

あなたはオーバーヘッドが気に入らないと言いましたが、vue-cli webpack templateはあなたを数分で送ることができます。

関連する問題