Question

这是我的Razor页面代码：

@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>

这里是webpack javascript的条目：

import Vue from 'vue';

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

Webpack配置：

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

所有的javascript文件都已到位，当打开页面时，我可以看到Chrome开发者工具中的映射代码。如果我在javascript代码中创建一个断点，它将被击中。但显示的文字是“{{text}}”，而不是“abcdefg”。

如果我在div之后添加了以下代码：

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

或添加以下代码并从@section Scripts部分

中删除javascript文件

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

有效。

那么如何让我的webpack包与Razor页面中的@ Scripts.Render一起使用？

Answer 1

好的，现在我找到了捆绑包无效的原因：

因为@RenderSection（＆＃34; Scripts＆＃34;，false）写在_Layout.cshtml的标题中。因此，包头JavaScript文件将在标头中引用。但是当我切换到原始引用（脚本标记）时，它将在我的div标记之后应该是它。当我将捆绑部件更改为：

时

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

有效。

@RenderSection（＆＃34; ScriptBlock＆＃34;，false）写在正文的结束标记后_Layout.cshtml的底部。

Answer 2

我使用带有browserify而不是webpack的asp.net的vuejs。包装应该是一个独立的构建步骤。我设置了一个gulp任务来获取我的vue代码并将其捆绑并将其放在asp.net的scripts文件夹中。

我认为你需要在这里做类似的事情。

如何在Razor页面中使用Webpack包中的Vue.js代码？

2 个答案: