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

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


我补充下我的需求

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

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

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

谢谢大家。

回答:

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

回答:

可以啊,但我觉得不好维护。
首先界面在做的时候要用响应式布局,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端');               
    }

回答:

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

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

回答:

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

回答:

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配置中这两段代码可以抽出来,单独写一套配置

回答:

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

回答:

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

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注