vue+webpack同個(gè)項(xiàng)目怎么實(shí)現(xiàn)兩個(gè)模板(手機(jī)端和pc端)，根據(jù)不同設(shè)備切換自動(dòng)切換模板？

如題，個(gè)人小項(xiàng)目需要同時(shí)支持pc和mobile 兩個(gè)端。
所以最好需要在一個(gè)項(xiàng)目里干活，感覺(jué)省事方便。
我用得是vue-cli 腳手架。不知道如何操作才能把 pc端和手機(jī)端區(qū)分寫(xiě)代碼，然后一起構(gòu)建。

我補(bǔ)充下我的需求

我的項(xiàng)目PC端頁(yè)面已經(jīng)做好了，用的vue-cli

現(xiàn)在需要做手機(jī)端頁(yè)面，我還打算用vue-cli 所以希望把手機(jī)端的頁(yè)面放在現(xiàn)有PC端項(xiàng)目里完成，不想再新建一個(gè)項(xiàng)目。

所以我需要知道webpack 該怎么配置，如何避免代碼冗余（比如手機(jī)端加載了自己沒(méi)用到的PC端的庫(kù)）

謝謝大家。

回答

編輯回答

墨沫

1.首先不推薦這樣做，除非你的頁(yè)面是響應(yīng)式布局的，不然一般的to c的頁(yè)面pc端和手機(jī)端的布局差別還是很大的。如果你是響應(yīng)式布局，那么就不需要區(qū)分pc端和手機(jī)端了，代碼是響應(yīng)式的
2.如果真的要放一起。那可能是有兩個(gè)入口或者兩個(gè)目錄，一個(gè)放pc端的，一個(gè)放移動(dòng)端的。打包生成兩套代碼。通過(guò)Nginx配置來(lái)進(jìn)入不同的目錄

2017年12月4日 00:02

編輯回答

魚(yú)梓

router/index.js里根據(jù)當(dāng)前是pc還是移動(dòng)端引用頁(yè)面組件就可以了吧？
類(lèi)似這樣

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

2017年4月11日 16:08

編輯回答

互擼娃

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配置中這兩段代碼可以抽出來(lái)，單獨(dú)寫(xiě)一套配置

2018年6月30日 14:28

編輯回答

任她鬧

可以啊，但我覺(jué)得不好維護(hù)。
首先界面在做的時(shí)候要用響應(yīng)式布局，pc端界面和移動(dòng)端都要先調(diào)好。還得做區(qū)分，可能pc端界面展示移動(dòng)端不展示或者展示方式不同。
總之可以在全局用一個(gè)flag做為判斷。移動(dòng)端這樣，pc端那樣。要加meta的話可以在entry.js用js手動(dòng)去添加。

    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('移動(dòng)端');
    }else{
        console.log('pc端');               
    }

2018年5月28日 08:23

編輯回答