使用vuejs的Webpack错误

Question

当我在/ articles的某个路径或子路径中并且我想访问其他子路径时，webpack会发送此错误：

在这种情况下，我在/ articles / create，我尝试访问/ articles，我无法解决此错误

@imcvampire 这是您发布的文件：

这是webpack服务器配置：

const merge = require('webpack-merge');
const nodeExternals = require('webpack-node-externals');
const baseConfig = require('./webpack-base.config.js');
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');

module.exports = merge(baseConfig, {
    // Point entry to your app's server entry file
    entry: __dirname + '/../entries/entry-server.js',

    // This allows webpack to handle dynamic imports in a Node-appropriate
    // fashion, and also tells `vue-loader` to emit server-oriented code when
    // compiling Vue components.
    target: 'node',

    // For bundle renderer source map support
    devtool: 'source-map',

    // This tells the server bundle to use Node-style exports
    output: {
        libraryTarget: 'commonjs2',
        path: __dirname + '/../../',
        filename: '[name].bundle.js'
    },

    // https://webpack.js.org/configuration/externals/#function
    // https://github.com/liady/webpack-node-externals
    // Externalize app dependencies. This makes the server build much faster
    // and generates a smaller bundle file.
    externals: nodeExternals({
        // do not externalize dependencies that need to be processed by webpack.
        // you can add more file types here e.g. raw *.vue files
        // you should also whitelist deps that modifies `global` (e.g. polyfills)
        whitelist: /\.css$/
    }),

    // This is the plugin that turns the entire output of the server build
    // into a single JSON file. The default file name will be
    // `vue-ssr-server-bundle.json`
    plugins: [
        new VueSSRServerPlugin()
    ]
});

这是webpack客户端配置：

const webpack = require('webpack');
const merge = require('webpack-merge');
const baseConfig = require('./webpack-base.config.js');
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');

module.exports = merge(baseConfig, {
    entry: __dirname + '/../entries/entry-client.js',
    output: {
        path: __dirname + '/../../build/assets',
        filename: '[name].bundle.js'
    },
    plugins: [
        // Important: this splits the webpack runtime into a leading chunk
        // so that async chunks can be injected right after it.
        // this also enables better caching for your app/vendor code.
        new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest',
            minChunks: Infinity
        }),
        // This plugins generates `vue-ssr-client-manifest.json` in the
        // output directory.
        new VueSSRClientPlugin()
    ]
});

另外还有webpack-base：

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: __dirname + '/../app.js',
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader'
            },
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.scss$/,
                use: ['vue-style-loader', 'css-loader','sass-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            inject: false,
            filename: __dirname + '/../../build/index.html',
            template: __dirname + '/../template.ejs'
        })
    ]
};

这是vue route config：

let articlesRoutes = {
    path: '/articles',
    component: () => import('./pages/articles/articles.vue'),
    children: [
        {path: '', component: () => import('./pages/articles/index.vue')},
        {path: 'create', component: () => import('./pages/articles/create.vue')},
        {path: 'id', component: () => import('./pages/articles/show.vue')}
    ]
}

let routes = [
    {path: '/', component: () => import('./pages/main.vue')},
    {path: '/create', component: () => import('./pages/members/register.vue')},
    articlesRoutes
]

export default routes;