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
Post a Comment