Question

我发现很好article关于＆＃34;如何使用VUE SSR和Webpack＆＃34;配置.NET CORE。

一切都很好，但是当我想在路线中使用延迟加载组件时，我收到了错误。

An unhandled exception occurred while processing the request.
NodeInvocationException: Cannot find module '1.js'
Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+<InvokeExportAsync>d__7.MoveNext()

或（取决于我使用的内容（resolve => require(['..)）或() => import("")

NullReferenceException: Object reference not set to an instance of an object.
Microsoft.AspNetCore.SpaServices.Prerendering.PrerenderTagHelper+<ProcessAsync>d__29.MoveNext()

__vue_ssr_bundle__:18146 Error: Cannot find module '1.js'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at r (C:\Projects\SmartSystem\DEV\Fibit.Bruno\src\Fibit.Bruno.Web.Mvc\EshopClientApp\node_modules\vue-server-renderer\build.js:8152:16)
at Function.requireEnsure [as e] (__vue_ssr_bundle__:41:25)
at component (__vue_ssr_bundle__:16228:40)
at __vue_ssr_bundle__:18015:17
at __vue_ssr_bundle__:18042:66
at Array.map (native)

我尝试调试.net spaservices代码，我发现了抛出异常的地方 - 在这种方法中：

Module._resolveFilename = function(request, parent, isMain) {
  if (NativeModule.nonInternalExists(request)) {
    return request;
  }

  var resolvedModule = Module._resolveLookupPaths(request, parent);
  var id = resolvedModule[0];
  var paths = resolvedModule[1];

  // look up the filename first, since that's the cache key.
  debug('looking for %j in %j', id, paths);

  var filename = Module._findPath(request, paths, isMain);
  if (!filename) {
    var err = new Error("Cannot find module '" + request + "'");
    err.code = 'MODULE_NOT_FOUND';
    throw err;
  }
  return filename;
};

上面的Id属性包含此值： 0.js

路径：上面的属性包含此路径数组

"C:\Projects\SmartSystem\DEV\Fibit.Bruno\src\Fibit.Bruno.Web.Mvc\EshopClientApp\node_modules\vue-server-renderer\node_modules"
"C:\Projects\SmartSystem\DEV\Fibit.Bruno\src\Fibit.Bruno.Web.Mvc\EshopClientApp\node_modules"
"C:\Projects\SmartSystem\DEV\Fibit.Bruno\src\Fibit.Bruno.Web.Mvc\node_modules"
"C:\Projects\SmartSystem\DEV\Fibit.Bruno\src\node_modules"
"C:\Projects\SmartSystem\DEV\Fibit.Bruno\node_modules"
"C:\Projects\SmartSystem\DEV\node_modules"
"C:\Projects\SmartSystem\node_modules"
"C:\Projects\node_modules"
"C:\node_modules"
"C:\Projects\SmartSystem\DEV\Fibit.Bruno\src\Fibit.Bruno.Web.Mvc\node_modules"
"C:\Users\Martin\.node_modules"
"C:\Users\Martin\.node_libraries"
"C:\Program Files\nodejs\lib\node"

ERROR：

err = Error: Cannot find module '0.js' at Function.Module._resolveFilename (module.js:469:15) at Function.Module._load (module.js:417:25) at Module.require (module.js:497:17) at require (internal/module.js:20:19) at r (C:\Projects\SmartSystem\DEV\Fibit.Bruno\src\Fibit.Bruno.Web.Mvc\EshopClientApp\node_modules\vue-server-renderer\build.js:8152:16) at Function.requireEnsure [as e] (__vue_ssr_bundle__:41:25) at Object.module.exports.Object.defineProperty.value (__vue_ssr_bundle__:16233:40) at __webpack_require__ (__vue_ssr_bundle__:27:30) at Object.module.exports.Object.defineProperty.value (__vue_ssr_bundle__:10431:15) at __webpack_require__ (__vue_ssr_bundle__:27:30), request = "0.js"
err.code = 'MODULE_NOT_FOUND'

ROUTER：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', component: resolve => require(['../components/Dashboard.vue'], resolve) },
        { path: '/messages', component: resolve => require(['../components/Messages.vue'], resolve) },
    ]
});

export default router;

WEBPACK config：

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);

    const sharedConfig = () => ({
        stats: { modules: false },
        resolve: { extensions: ['.js', '.vue'] },
        output: {
            filename: '[name].js',
            publicPath: '/dist/'
        },
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                },
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    include: __dirname,
                    exclude: /node_modules/
                },
                { 
                    test: /\.css$/, 
                    loader: "style-loader!css-loader" 
                }
            ]
        }
    });

    const clientBundleOutputDir = '../wwwroot/dist';
    const clientBundleConfig = merge(sharedConfig(), {
        entry: { 'main-client': './client.js' },
        output: {
            path: path.join(__dirname, clientBundleOutputDir)
        }
    });

    const serverBundleConfig = merge(sharedConfig(), {
        target: 'node',
        entry: { 'main-server': './server.js' },
        output: {
            libraryTarget: 'commonjs2',
            path: path.join(__dirname, '../wwwroot/dist')
        },
        module: {
            rules: [
                {
                    test: /\.json?$/,
                    loader: 'json-loader'
                }
            ]
        },
    });

    return [clientBundleConfig, serverBundleConfig];
}

如何使用SSR，.NET CORE和Webpack解决延迟加载的问题？有人有任何想法吗？谢谢！

Answer 1

Combining the two, this is how to define an async component that will be automatically code-split by webpack:

const Foo = () => import('./Foo.vue')
Nothing needs to change in the route config, just use Foo as usual:

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})

Answer 2

我最近发布了一个类似于您正在寻找的问题。实际上，在这种情况下你甚至不需要vue-router，因为你还从我所看到的那里开始研究MVC项目。

Global Vue Component Exposure via Webpack

基本上，你可以注射＆＃39;在webpack的实例化文件中就像这样的组件;

在这种情况下，我使用main.js作为我的＆＃39; startup＆＃39; JS

{{1}}

但是，我仍在寻找有关异步加载失败的解决方案。基本上发生的事情是组件将成功加载但在加载序列的一部分失败。大声笑，我意识到我只领先你一步，没有突破只是你能够像我一样加载组件希望你按照上面的代码

延迟加载路由VUE，Webpack，.NET .CORE

2 个答案: