asp.net mvc - How can I use the Vue.js code from a webpack bundle in a Razor page? -


here razor page 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> 

and here entry of webpack javascript:

import vue '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')             }         })     ] }; 

all javascript files in place , when open page can see mapped code developer tools of chrome. , if make break point in javascript code, hit. text displayed "{{text}}", not "abcdefg".

if added following code after div:

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

or add following code , remove javascript file @section scripts part

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

it works.

so how can make webpack bundle work @scripts.render in razor page?

i use vuejs asp.net browserify rather webpack. , packing should independent build step. setup gulp task take vue code , bundle , place in scripts folder of asp.net.

i think need similar here.


Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -