1. First of all, this is not recommended, unless your page is a responsive layout, the general to c page PC side and mobile side of the layout is still very different. If you are responsive layout, then there is no need to distinguish between PC side and mobile side, the code is responsive
2. If we really want to put it together. There may be two entrances or two directories, one on the pc side and the other on the mobile side. Package to generate two sets of code. Enter different directories through Nginx configuration

Yes, but I don't think it's easy to maintain.
first of all, the interface should be laid out in a responsive manner, and both the PC interface and the mobile interface should be adjusted first. It is also necessary to make a distinction. The interface of the pc may not be displayed on the mobile end or in a different way.
in short, you can use a flag as a judgment globally. The mobile end is like this and the PC side is like that. If you want to add meta, you can use js to add it manually in entry.js.

    if( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i) ){
        console.log('');
    }else{
        console.log('pc');               
    }

is it OK to refer to the page component in router/index.js based on whether it is pc or mobile?
something like this

{
      path: '/',
      name: 'index',
      component(resolve) {
        if (isPc) {
          require(['../pc/containers/index.vue'], resolve);
        } else {
          require(['../mobile/containers/index.vue'], resolve);
        }
      },
    },

Thank you for the invitation. The best way is to make it responsive

webpack-merge,commander module learn about it, configure its own command line, and enable different entry files from the command line

    entry: {
        app: './src/main.js'
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env': require('../config/dev.env')
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
        new webpack.NoEmitOnErrorsPlugin(),
        // https://github.com/ampedandwired/html-webpack-plugin
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'index.html',
            inject: true
        }),
        // copy custom static assets
        new CopyWebpackPlugin([{
            from: path.resolve(__dirname, '../static'),
            to: config.dev.assetsSubDirectory,
            ignore: ['.*']
        }])
    ]

these two pieces of code in the webpack configuration can be extracted to write a separate set of configuration

I think you probably mean how to do multi-page development using vue-cli. This is written in great detail. I hope it will help you vue+vuecli+webapck2 to implement multi-page applications

that's how I do it.
1:webpack configures two entrances (pc+mobile), and generates two main files when packing.
2: when accessing, you can use node, to flow to different interfaces according to the flow of unused devices.

reference: http://www.uncle-yang.com

Boss, how did you solve it? Can you tell me what to think? Thank you!