2017-01-29 15 views
0

vue-cliでプロジェクトを作成します。webpackでrequirejsを使用してjsファイルを生成する方法vue-cliを使用します

vue init webpack vue-demo 
cd vue-demo 
npm install 
npm run dev 

ここでいくつかのコンポーネントをデボラップしたいと思います。そして私はそれをrequirejsで使いたいと思っています。 WebPACKの設定

entry: { 
    app: './src/main.js' 
    }, 
    output: { 
    path: config.build.assetsRoot, 
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, 
    filename: '[name].js', 
    libraryTarget: 'umd', 
    library:'senyint' 
    } 

Q1:それは3つのファイルを生成します。 app.js manifest.js vendor.js デモにはHello.vueがあります。 webpackが生成するものによってjsファイルが必要です。 しかし、私はそれらを必要とします、それはundefiendです。どうして?何が悪いですか? エクスポートする場所 これでmain.jsでエクスポートしました。

import Hello from 'components/Hello' 
    module.exports = { 
Hello 
} 

質問2:私はvueなしでパッケージ化したくありません。 だから、私はこれを行う場合は、ときNPMの実行のdevのショーのエラーこの

externals: { 
    vue: 'vue' 
} 

を設定する「キャッチされない例外TypeError:プロパティを読み取ることができません未定義の 『設定』」 それをカントは、Vueのを見つける原因。 externals vueを実行する方法を設定する場合は、

答えて

0

Q1:私はこのラインで

define("senyint", ["vue"], factory); 

を発見したJavaScriptファイルapp.jsを開き 。 'senyint'はパッケージ名ですが、webpackはjsを生成しますが、動作しません。 私はこのようなコードを変更します

define(["vue"], factory); 

それを動作させる必要があります。しかし、なぜ私は知りません....私はちょうどこの問題を解決することができます。 main.jsは

requirejs.config({ 
    baseUrl: 'js/common', 
    paths: { 
    module: '../modules' 
    }, 
    shim: { 
    app: { 
     deps:['vue','manifest','vendor'] 
    } 
    } 
}) 

requirejs(['module/demo', 'app'], function (demojs, app) { 
    debugger 
    console.log(app) 
}) 

Q2をconfigコン.vueコンポーネント

import Hello from 'components/Hello.vue' 

export const scom = { 
    Hello 
} 

requirejsをエクスポート: 私はVUE-CLI WebPACKのテンプレートで自分のプロジェクトを建て。 (WebPACKの-単純ではない)ビルドディレクトリで は 'webpack.base.conf.js' と 'webpack.prod.conf.js' 修正webpack.prod.conf.jsが

externals: { 
    vue: { 
     root: 'Vue', 
     commonjs: 'vue', 
     commonjs2: 'vue', 
     amd: 'vue' 
    } 
    }, 

を追加し、追加していけない持っています'webpack.base.conf.js'のコード。npmでビルドを実行すると、vue.jsなしでパッケージ化されます.Npm devでwebpack.base.conf.jsを実行すると、vueで実行されます。

関連する問題