延迟加载的vue-router组件不适用于SSR

Question

我有两个用于server.js和client.js的入口点。

如果我尝试导入路由而没有延迟加载，则可以使用：

import Test from "../views/Test";

export const routes = [{
    path: '/my-route',
    name: "Test",  
    component: Test,
}]

但是，如果我尝试延迟加载，它将在SSR上失败：

export const routes = [{
    path: '/my-route',
    name: "Test"
    component: () => import('../views/Test.vue'),
}]

var jsonpArray = window [“ webpackJsonp”] = window [“ webpackJsonp”] || []

ReferenceError：未定义窗口

因此，当我进行延迟加载时，它会以某种方式添加窗口对象。 ：/

我已经找到this github issue，但我不知道如何使用laravel-mix进行修复。对于了解Laravel-mix的人，我可以像这样添加一个webpackConfig：

mix.webpackConfig({
   output: {
      chunkFilename: 'js/chunks/[name].js?id=[chunkhash]',
      publicPath: '/',
   }
})

Answer 1

http://www.compulsivecoders.com/tech/how-to-build-multiple-vendors-using-laravel-mix/https://github.com/webpack/webpack/issues/7502#issuecomment-443363395

这两个链接是解决方案的关键。

显然，我们不能使用laravel-mix来为2个js捆绑包提供独立的目标，因此您需要构建2个webpack.mix文件或像这样捆绑它们。

在我的webpack.mix.js中：

require('laravel-mix-merge-manifest');

// Creates target specific compiled versions
if (process.env.npm_config_section === 'server') {
    mix.js('resources/js/app-server.js', 'public/js')
        .webpackConfig({ target: 'node' })
        .mergeManifest()
        .version();
} else if (process.env.npm_config_section === 'client') {
    mix.js('resources/js/app-client.js', 'public/js')
        .webpackConfig({ target: 'web' })
        .mergeManifest()
        .version();
} else {
    console.log(
        '\x1b[41m%s\x1b[0m',
        'Provide correct --section argument to build command: server, client'
    );
    throw new Error('Provide correct --section argument to build command!')
}

// Creates target specific chunk
mix.webpackConfig({
    output: {
        chunkFilename: 'js/chunks/' + process.env.npm_config_section + '/[name].js?id=[chunkhash]',
        publicPath: '/',
    },
}

在我的packages.json中：

"scripts": {
    "dev-all": "npm --section=server run dev && npm --section=client run dev",
}

仍然不确定如何使用此设置进行观察投票：（