vue+webpack同个项目怎么实现两个模板(手机端和pc端)，根据不同设备切换自动切换模板？

Question

如题，个人小项目需要同时支持pc和mobile 两个端。
所以最好需要在一个项目里干活，感觉省事方便。
我用得是vue-cli 脚手架。不知道如何操作才能把 pc端和手机端 区分写代码，然后一起构建。

---

我补充下我的需求

我的项目PC端页面已经做好了，用的vue-cli

现在需要做手机端页面，我还打算用vue-cli 所以希望把手机端的页面放在现有PC端项目里完成，不想再新建一个项目。

所以我需要知道webpack 该怎么配置，如何避免代码冗余（比如手机端加载了自己没用到的PC端的库）

谢谢大家。

Answer 1

1.首先不推荐这样做，除非你的页面是响应式布局的，不然一般的to c的页面pc端和手机端的布局差别还是很大的。如果你是响应式布局，那么就不需要区分pc端和手机端了，代码是响应式的
2.如果真的要放一起。那可能是有两个入口或者两个目录，一个放pc端的，一个放移动端的。打包生成两套代码。通过Nginx配置来进入不同的目录

Answer 2

可以啊，但我觉得不好维护。
首先界面在做的时候要用响应式布局，pc端界面和移动端都要先调好。还得做区分，可能pc端界面展示移动端不展示或者展示方式不同。
总之可以在全局用一个flag做为判断。移动端这样，pc端那样。要加meta的话可以在entry.js用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端');               
    }

Answer 3

router/index.js里根据当前是pc还是移动端引用页面组件就可以了吧？
类似这样

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

Answer 4

感谢邀请，最佳的方式是做成响应式的比较好

Answer 5

webpack-merge，commander模块了解一下，配置自己的命令行，从命令行启用不同的入口文件

    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: ['.*']
        }])
    ]

webpack配置中这两段代码可以抽出来，单独写一套配置

Answer 6

我想你的意思大概是使用vue-cli怎样进行多页面开发。这个写的很详细，希望对你有帮助vue+vuecli+webapck2实现多页面应用

Answer 7

我就是这么搞的~
1:webpack配置两个入口(pc+mobile)，打包时生成两个主文件,
2:通过访问时，经过node，可以根据不用的设备流向不同的界面~

参考：http://www.uncle-yang.com

Answer 8

大佬，请问你是怎么解决的！可以说一下思路吗？感激！！！