• 場景1

移動端和pc端風格類似，內容可複用：

直接媒體查詢 @media screen and (max-width: ***px)； 根據螢幕大小設定樣式

• 場景2
  

風格差別比較大，內容不可複用，但介面可複用；

放在同一工程下，新建手機端資料夾，編寫相應路由。

在app.vue頁面編寫，根據開啟頁面的機器來判別選擇跳到不同的路由下。

    computed: {
        _isMobile () {
            const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
            
 
return flag;
        }
    },

在app.vue 頁面內區分調到不同頁面：

    mounted () {
        // 移動端 跳轉到對應路徑
        if (this._isMobile) {
            this.$router.replace('/phone');
        } else {
            // 否則預設跳轉首頁
            this.$router.replace('/');
        }
    }