Wie kann ich den Vue.js-Code aus einem Webpack-Bundle auf einer Razor-Seite verwenden?

Question

Hier ist meine Razor Seite Code:

@using System.Web.Optimization; 

@{ BundleTable.Bundles.Add(
     new ScriptBundle("~/Scripts/Vuejs") 
      .Include("~/Static/Scripts/Vuejs/vue.min.js")); } 

@section Scripts { 
    @Scripts.Render("~/Static/vue/assets/bundle.js") 
    @Scripts.Render("~/Scripts/Vuejs") 
} 

<div id="app_container"> 
    {{text}} 
</div> 

und hier ist der Eintritt des webpack javascript:

import Vue from 'vue'; 

const v = new Vue({ 
    el: '#app_container', 
    data: { text: 'abcdefg' } 
}); 

Webpack config:

export default { 
    entry: [ 
     'babel-polyfill', 
     './src/index.js' 
    ], 

    output: { 
     filename: 'bundle.js', 
     path: 'C:/WebSandbox/Static/vue/assets', 
     publicPath: '/vue/assets/' 
    }, 

    devtool: 'source-map', 

    module: { 
     loaders: [ 
      { test: /\.vue$/, loader: 'vue' }, 
      { test: /\.js/, loader: 'babel', exclude: /node_modules/ }, 
      { test: /\.json$/, loader: 'json' }, 
      { test: /\.txt/, loader: 'raw' } 
     ] 
    }, 

    plugins: [ 
     new webpack.optimize.DedupePlugin(), 
     new webpack.DefinePlugin({ 
      'process.env': { 
       NODE_ENV: JSON.stringify('production'), 
       APP_ENV: JSON.stringify('browser') 
      } 
     }) 
    ] 
}; 

Alle JavaScript-Dateien vorhanden sind, Und wenn ich die Seite öffne, kann ich den zugeordneten Code aus den Entwickler-Tools von Chrome sehen. Und wenn ich einen Bruchpunkt im JavaScript-Code mache, wird es getroffen. Aber der angezeigte Text ist "{{text}}", nicht "abcdefg".

Wenn ich hinzugefügt folgenden Code nach dem div:

<script> 
    const v = new Vue({ el: "#app_container", data: { text: "abcdefg" } }); 
</script> 

oder fügen Sie die JavaScript-Datei von @section Scripts

Teil

<script src='~/Static/vue/assets/bundle.js'></script> 

Es funktioniert folgenden Code und entfernen.

So wie kann ich meine webpack Bündel Arbeit mit dem @ Scripts.Render in Razor Seite machen?

Answer 1

OK, jetzt fand ich, warum das Bündel nicht funktioniert:

Da die @RenderSection ("Scripts", false) im Header _Layout.cshtml geschrieben wurde. Daher wird die Paket-JavaScript-Datei in der Kopfzeile referenziert. Aber wenn ich zur rohen Referenz (Skript-Tag) wechsle, wird es nach meinem div-Tag sein, wo es sein soll. Wenn ich das Bündel Teil zu ändern:

@section ScriptBlock { 
    @Scripts.Render("~/Static/vue/assets/bundle.js") 
} 

Es funktioniert.

Die @RenderSection („Script“, false) wurde in dem Boden des _Layout.cshtml unmittelbar nach dem End-Tag des Körpers geschrieben.

Answer 2

Ich benutze vuejs mit asp.net mit browserify statt webpack. Und die Verpackung sollte ein unabhängiger Build-Schritt sein. Ich habe eine Schluck-Aufgabe eingerichtet, um meinen Vue-Code zu nehmen und ihn in den Scripts-Ordner von asp.net zu packen.

Ich denke, Sie müssen etwas ähnliches hier tun.