本文基于工作項(xiàng)目開(kāi)發(fā)，做的整理筆記
前段時(shí)間公司有的小伙伴剛開(kāi)始學(xué)習(xí)vue月培，就直接著手用在新項(xiàng)目上，以項(xiàng)目實(shí)戰(zhàn)步步為營(yíng)恩急，不斷推進(jìn)vue的學(xué)習(xí)和使用杉畜。時(shí)間短，需求多衷恭，又是剛剛上手此叠，遇到的坑和困難也真不少，感覺(jué)每天都在瘋狂地解決問(wèn)題随珠。說(shuō)真的灭袁，每種技術(shù)的學(xué)習(xí)和使用，在實(shí)際項(xiàng)目的開(kāi)發(fā)上得到了充分檢驗(yàn)窗看，個(gè)人能力也在快速的成長(zhǎng)茸歧。
前一段時(shí)間，寫(xiě)過(guò)文章“Vue教程--使用官方腳手架構(gòu)建實(shí)例”显沈，主要是針對(duì)PC端软瞎，架構(gòu)而寫(xiě)。當(dāng)初的目的拉讯，也是想做為一個(gè)入門(mén)的教程涤浇，但是根據(jù)反饋和自己后面的感受，發(fā)現(xiàn)并不是很好遂唧，并沒(méi)有做到真正的一步步上手芙代。
今天決定專門(mén)針對(duì)Wap端去做這樣一個(gè)demo，整體架構(gòu)的搭建盖彭，并含有一些通用的功能纹烹。其中，部分知識(shí)點(diǎn)請(qǐng)回看前面那篇文章召边。對(duì)比來(lái)看铺呵，此篇應(yīng)該更為詳細(xì)，步步為營(yíng)隧熙。

前提條件：
你已經(jīng)了解vue的基礎(chǔ)知識(shí)片挂，嘗試過(guò)使用vue-cli官方腳手架搭建項(xiàng)目。

編碼環(huán)境：
system：OS X EI Capitan 10.12.5
npm：5.4.2
node：v8.8.0
vue-cli：@lastest

相關(guān)技術(shù)棧：
vue2 + vuex + vue-router + webpack + ES6/7 + fetch／axios + sass + flex + svg

相關(guān)地址：
項(xiàng)目代碼github地址：https://github.com/YuxinChou/vue-wap-demo
項(xiàng)目在線地址：http://www.knowing365.com
（可用手機(jī)掃描下文中二維碼，或用chrome瀏覽器模擬手機(jī)訪問(wèn)）
參考項(xiàng)目：https://github.com/bailicangdu/vue2-elm

WAP端項(xiàng)目搭建從0到1.jpg

目錄
| - 0.傳送門(mén)
| - 1.安裝
| - 2.項(xiàng)目說(shuō)明
| - 3.項(xiàng)目搭建
??| - Step1. 初始化
??| - Step2. 母版頁(yè)Layout
??| - Step3. 配置rem
??| - Step4. 配置sass
??| - Step5. 頂部導(dǎo)航header
??| - Step6. 引入iconfont
??| - Step7. 側(cè)邊菜單sidebar
??| - Step8. 底部導(dǎo)航footer
??| - Step9. 返回頂部backToTop（組件）
??| - Step10. 倉(cāng)庫(kù)存儲(chǔ)store
??| - Step11. 側(cè)邊菜單狀態(tài)保存
??| - Step12. 搜索欄searchBar（組件）
??| - Step13. 頁(yè)面添加
??| - Step14. 彈窗提示（組件）
??| - ---------------------------------- 下內(nèi)容為詳解2
??| - Step15. 完善login頁(yè)面（fetch請(qǐng)求數(shù)據(jù)）
??| - Step16. 合理引入svg
??| - Step17. 用axios實(shí)現(xiàn)請(qǐng)求（取代原生fetch）
??| - Step18. 登錄狀態(tài)存入倉(cāng)庫(kù)
??| - Step19. 滾動(dòng)加載更多（組件）
??| - Step20. 回到指定位置（組件）
??| - Step21. 完善消息列表頁(yè)面
??| - Step22. 頂部菜單改造（slot的使用）
??| - --------------------------------- 下內(nèi)容為詳解3
??| - Step23. 完善其他頁(yè)面
??| - Step24. 權(quán)限檢查
??| - Step25. 頁(yè)面切換動(dòng)畫(huà)transition
??| - Step26. 輪播展示（swiper)
??| - Step26. 分享功能（vue-social-share）
??| - Step28. ...
| - 4.項(xiàng)目部署
??| - a）本地部署
??| - b）服務(wù)器部署
| - 5.后續(xù)

Step23. 完善其他頁(yè)面

contacts聯(lián)系人頁(yè)面與messages消息頁(yè)面想似音念，用了倉(cāng)庫(kù)存儲(chǔ)數(shù)據(jù)沪饺。下面看看它的相關(guān)代碼：

/**********************************************/
/* src/page/contacts/contacts.vue             */
/**********************************************/

<template>
  <div>
    <!-- head -->
    <head-top>
      <span slot='head_text' class="head_text">聯(lián)系人</span>
      <span slot='head_btn' class="head_btn"><router-link to="/add">添加</router-link></span>
    </head-top>
    <!-- main -->
    <div class="main_wrapper">
      <div class="container">
        <search-bar></search-bar>
        <div class="new_friend">
          <router-link to="/add">
            新朋友
            <span style="position: absolute; right: 0.5rem;"><i class="iconfont icon-arrow-right"></i></span>
          </router-link>
        </div>
        <div class="tab">
          <span class="tab_item" :class="{active:tabActive==0}" @click="handleChangeTab(0)">好友</span>
          <span class="tab_item" :class="{active:tabActive==1}" @click="handleChangeTab(1)">群</span>
          <span class="tab_item" :class="{active:tabActive==2}" @click="handleChangeTab(2)">多人聊天</span>
          <span class="tab_item" :class="{active:tabActive==3}" @click="handleChangeTab(3)">設(shè)備</span>
          <span class="tab_item" :class="{active:tabActive==4}" @click="handleChangeTab(4)">通訊錄</span>
          <span class="tab_item" :class="{active:tabActive==5}" @click="handleChangeTab(5)">公眾號(hào)</span>
        </div>
        <div class="group clearfix" v-for="(group, index) in data" :key="index">
          <div class="group_catg" @click="handleToggleGroupList(index)">
            <i class="iconfont" :class="group.closed?'icon-arrow-right':'icon-arrow-down'"></i>
            <span class="name">{{group.name}}</span>
            <span class="nums">{{group.online}}/{{group.total}}</span>
          </div>
          <div class="group_list" :class="{hide:group.closed}">
            <router-link to="/profile" class="item" v-for="(item, index) in group.list" :key="index">
              <div class="item_image" :style="'background-image: url('+item.image+');'"></div>
              <div class="item_info" :class="{last:index==(group.list.length-1)}">
                <div class="item_info_head">
                  <span class="name">{{item.name}}</span>
                </div>
                <div class="item_info_content"><span>{{item.type}}</span>&nbsp;{{item.content}}</div>
              </div>
            </router-link>
          </div>
        </div>
        <transition name="loading">
          <div style="background-color: #fff; padding: 0.5rem; text-align: center; color: #999;" v-show="showLoading">Loading...</div>
        </transition>
      </div>
    </div>
    <!-- footer -->
    <foot-menu :activeIndex="1"></foot-menu>
  </div>
</template>

<script>
  import headTop from '@/components/header/head'
  import footMenu from '@/components/footer/footer'  
  import searchBar from '@/components/common/searchBar' 
  import {scrollPosition} from '@/utils/utils'
  export default {
    components: {
      headTop,
      footMenu,
      searchBar,
    },
    data () {
      return {
        data:[], // 列表數(shù)據(jù)
        tabActive: 0, // 當(dāng)前激活的tab
        showLoading: true, //顯示加載動(dòng)畫(huà)
      }
    },
    mounted(){
      this.initData();
    },
    methods: {
      async initData(){
        // 判斷之前是否請(qǐng)求過(guò)數(shù)據(jù)
        if (this.$store.getters.contacts.length == 0) {
          // 請(qǐng)求數(shù)據(jù)
          this.$store.dispatch('GetContactsList').then(() => {
            this.data = this.$store.getters.contacts;
          }).catch(err => {
            console.log('error:'+err);
          });
          this.hideLoading();
        } else {
          // 直接取之前的數(shù)據(jù)
          this.data = this.$store.getters.contacts;
          this.hideLoading();
        }
      },
      handleChangeTab(value){
        this.tabActive = value;
      },
      handleToggleGroupList(index){
        this.data[index].closed = !this.data[index].closed;
      },
      hideLoading(){
        this.showLoading = false;
      },

    },
  }
</script>

<style lang="scss" scoped>
  .container {
    margin-bottom: 1.95rem;
    background-color: #f5f5f5;
  }
  .new_friend {
    position: relative;
    background-color: #fff;
    border: 1px solid #eee;
    border-width: 1px 0; 
    margin-bottom: 0.5rem;
    color: #666;
    a {
      display: block;
      padding: 0.5rem; 
      span {
        position: absolute;
        right: 0.5rem;
        .iconfont {
          color: #666;
          font-size: 0.6rem;
        }
      }
    }
  }
  .tab {
    background-color: #fff;
    border: 1px solid #eee;
    border-width: 1px 0; 
    overflow-x: auto;
    overflow-y: hidden;
    width: 140%;
    height: 1.85rem;
    .tab_item {
      display: inline-block;
      padding: 0.5rem 0;
      margin: 0 0.5rem;
      color: #666;
      &.active {
        color: #61b8f8;
      }
    }
  }
  .group {
    background-color: #fff;
    .group_catg {
      position: relative;
      padding: 0.3rem 0.5rem;
      line-height: 1rem;
      .iconfont {
        color: #999;
        font-size: 0.6rem;
        margin-right: 0.3rem;
      }
      .name {
        color: #666;
        font-size: 0.6rem;
        font-weight: 600;
      }
      .nums {
        position: absolute;
        right: 0.5rem;
        color: #999;
        font-size: 0.4rem;
      }
    }
  }
  .item {
    display: flex;
    flex-basis: 100%;
    background-color: #fff;
    .item_image {
      display: flex;
      margin: 0.25rem 0.5rem;
      min-width: 2rem;
      height: 2rem;
      border-radius: 2rem;
      background-size: cover;
      background-position: 50%;
      background-color: #d2d2d2;
      border-bottom: 1px solid transparent;
    }
    .item_info {
      display: flex;
      flex-basis: 100%;
      flex-direction: column;
      padding: 0.25rem 0.5rem 0.25rem 0;
      border-bottom: 1px solid #eee;
      overflow: hidden;
      .item_info_head {
        padding-top: 0.2rem;
        font-size: 0.5rem;
        overflow: hidden;
        color: #999;
        > .name {
          padding-top: 0.4rem;
          color: #666;
          font-size: 0.6rem;
          font-weight: 600;
          line-height: 1rem;
        }
        > .time {
          float: right;
          color: #999;
          font-size: 0.5rem;
          line-height: 1rem;
        }
      }
      .item_info_content {
        font-size: 0.5rem;
        line-height: 1.4;
        color: #666;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        span {
          color: #f2a73b;
        }
      }
      &.last {
        border: none;
      }
    }
  }
</style>

其他的頁(yè)面均為靜態(tài)頁(yè)面，直接上代碼闷愤，如下：

/**********************************************/
/* src/page/dynamics/dynamics.vue             */
/**********************************************/

<template>
  <div>
    <!-- head -->
    <head-top>
      <span slot='head_text' class="head_text">動(dòng)態(tài)</span>
      <span slot='head_btn' class="head_btn"><router-link to="/more">更多</router-link></span>
    </head-top>
    <!-- main -->
    <div class="main_wrapper">
      <div class="container">
        <search-bar></search-bar>
        <div class="catg">
          <router-link to="/more" class="catg_item">
            <i class="iconfont icon-category"></i>
            <span>好友動(dòng)態(tài)</span>
          </router-link>
          <router-link to="/more" class="catg_item">
            <i class="iconfont icon-category"></i>
            <span>附近</span>
          </router-link>
          <router-link to="/more" class="catg_item">
            <i class="iconfont icon-category"></i>
            <span>興趣部落</span>
          </router-link>
        </div>
        <div class="box">
          <div class="box_item">
            <router-link to="/game">
              <span class="image"><i class="iconfont icon-category"></i></span>
              <span class="name">游戲 (swiper demo)</span>
              <span class="right"><i class="iconfont icon-arrow-right"></i></span>
            </router-link>
          </div>
          <div class="box_item">
            <router-link to="/more">
              <span class="image"><i class="iconfont icon-category"></i></span>
              <span class="name">日跡</span>
              <span class="right"><i class="iconfont icon-arrow-right"></i></span>
            </router-link>
          </div>
          <div class="box_item">
            <router-link to="/more">
              <span class="image"><i class="iconfont icon-category"></i></span>
              <span class="name">看點(diǎn)</span>
              <span class="right"><i class="iconfont icon-arrow-right"></i></span>
            </router-link>
          </div>
          <div class="box_item">
            <router-link to="/more">
              <span class="image"><i class="iconfont icon-category"></i></span>
              <span class="name">京東購(gòu)物</span>
              <span class="right"><i class="iconfont icon-arrow-right"></i></span>
            </router-link>
          </div>
          <div class="box_item">
            <router-link to="/more">
              <span class="image"><i class="iconfont icon-category"></i></span>
              <span class="name">閱讀</span>
              <span class="right"><i class="iconfont icon-arrow-right"></i></span>
            </router-link>
          </div>
          <div class="box_item">
            <router-link to="/more">
              <span class="image"><i class="iconfont icon-category"></i></span>
              <span class="name">動(dòng)漫</span>
              <span class="right"><i class="iconfont icon-arrow-right"></i></span>
            </router-link>
          </div>
          <div class="box_item">
            <router-link to="/more">
              <span class="image"><i class="iconfont icon-category"></i></span>
              <span class="name">音樂(lè)</span>
              <span class="right"><i class="iconfont icon-arrow-right"></i></span>
            </router-link>
          </div>
        </div>
        <div class="box">
          <div class="box_item">
            <router-link to="/more">
              <span class="image"><i class="iconfont icon-category"></i></span>
              <span class="name">運(yùn)動(dòng)</span>
              <span class="right"><i class="iconfont icon-arrow-right"></i></span>
            </router-link>
          </div>
          <div class="box_item">
            <router-link to="/more">
              <span class="image"><i class="iconfont icon-category"></i></span>
              <span class="name">吃喝玩樂(lè)</span>
              <span class="right"><i class="iconfont icon-arrow-right"></i></span>
            </router-link>
          </div>
          <div class="box_item">
            <router-link to="/more">
              <span class="image"><i class="iconfont icon-category"></i></span>
              <span class="name">同城服務(wù)</span>
              <span class="right"><i class="iconfont icon-arrow-right"></i></span>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <!-- footer -->
    <foot-menu :activeIndex="2"></foot-menu>
  </div>
</template>

<script>
  import headTop from '@/components/header/head'
  import footMenu from '@/components/footer/footer'  
  import searchBar from '@/components/common/searchBar' 
  export default {
    components: {
      headTop,
      footMenu,
      searchBar
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    margin-bottom: 1.95rem;
    background-color: #f5f5f5;
  }
  .catg {
    background-color: #fff;
    width: 100%;
    height: 2.45rem;
    display: flex;
    margin-bottom: 0.5rem;
    .catg_item {
      flex: 1;
      display: flex;
      text-align: center;
      flex-direction: column;
      align-items: center;
      .iconfont {
        display: block;
        font-size: 1rem;
        margin-top: 0.2rem;
        color: #666;
      }
      span {
        display: block;
        font-size: 0.4rem;
        color: #666;
      }
      &.active {
        .iconfont {
          color: #68b7f9;
        }
        span {
          color: #68b7f9;
        }
      }
    }
  }
  .box {
    margin-bottom: 0.5rem;
    border-top: 1px solid #eee;
    .box_item {
      position: relative;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      border-width: 1px 0; 
      color: #666;
      a {
        display: block;
        padding: 0.5rem; 
        .image {
          margin-right: 0.5rem;
          .iconfont {
            font-size: 0.6rem;
          }
        }
        .right {
          position: absolute;
          right: 0.5rem;
          .iconfont {
            color: #666;
            font-size: 0.6rem;
          }
        }
      }
    }
  }
</style>

/**********************************************/
/* src/page/search/search.vue                 */
/**********************************************/

<template>
  <div>
    <!-- head -->
    <head-top :toggleBtn="false">
      <div slot="head_input" class="search">
        <div class="search_content">
          <i class="iconfont icon-search"></i><input placeholder="搜索" value="" />
        </div>
      </div>
      <span slot='head_btn' class="head_btn" @click="returnBack">取消</span>
    </head-top>
    <!-- main -->
    <div class="main_wrapper">
      <div class="container" :style="'height:'+wHeight+'px;'">
        <div class="recent">
          <router-link to="/chat" class="item">
            <div class="item_image" style="background-image: url(http://img.pingan.fusio.com.cn/materials/pic/700/20170928180518_0_KcXn.jpg);"></div>
            <div class="item_info">
              <div class="item_info_head">
                <span class="name">萬(wàn)丈-Infinite</span>
                <span class="close">x</span>
              </div>
            </div>
          </router-link>
          <router-link to="/chat" class="item">
            <div class="item_image" style="background-image: url(http://img.pingan.fusio.com.cn/materials/pic/700/20171012184532_0_xTaB.jpg;"></div>
            <div class="item_info last">
              <div class="item_info_head">
                <span class="name">切圖者聯(lián)盟</span>
                <span class="close">x</span>
              </div>
            </div>
          </router-link>
        </div>
        <div class="catg">
          <div class="catg_title">
            <span>網(wǎng)址導(dǎo)航</span>
          </div>
          <div class="catg_row">
            <router-link to="/more" class="catg_item">
              <span>看點(diǎn)</span>
            </router-link>
            <router-link to="/more" class="catg_item">
              <span>好友動(dòng)態(tài)</span>
            </router-link>
            <router-link to="/more" class="catg_item">
              <span>部落</span>
            </router-link>
          </div>
          <div class="catg_row">
            <router-link to="/more" class="catg_item">
              <span>小說(shuō)</span>
            </router-link>
            <router-link to="/more" class="catg_item">
              <span>頭像</span>
            </router-link>
            <router-link to="/more" class="catg_item">
              <span>熱搜榜</span>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import headTop from '@/components/header/head'
  export default {
    components: {
      headTop,
    },
    data() {
      return {
        wHeight: 0,
      }
    },
    mounted() {
      this.wHeight = document.documentElement.clientHeight || document.body.clientHeight;
    },
    methods: {
      returnBack() {
        this.$router.go(-1);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #fff;
  }
  .catg {
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
    .catg_title {
      padding: 0.8rem 0.5rem 0.5rem;
      color: #999;
      font-size: 0.4rem;
      text-align: center;
      border-top: 1px solid #eee;
    }
    .catg_row {
      width: 100%;
      display: flex;
      .catg_item {
        flex: 1;
        display: flex;
        text-align: center;
        flex-direction: column;
        align-items: center;
        margin: 0.5rem 0;
        span {
          display: block;
          font-size: 0.6rem;
          color: #1890f5;
        }
        &:nth-child(3n+2) {
          border: 1px solid #ccc;
          border-width: 0 1px;
        }
      }
    }
  }
  .item {
    display: flex;
    flex-basis: 100%;
    background-color: #fff;
    .item_image {
      display: flex;
      margin: 0.25rem 0.5rem;
      min-width: 1.6rem;
      height: 1.6rem;
      border-radius: 2rem;
      background-size: cover;
      background-position: 50%;
      background-color: #d2d2d2;
      border-bottom: 1px solid transparent;
    }
    .item_info {
      display: flex;
      flex-basis: 100%;
      flex-direction: column;
      padding: 0.25rem 0.5rem 0.25rem 0;
      border-bottom: 1px solid #eee;
      overflow: hidden;
      .item_info_head {
        padding-top: 0.3rem;
        font-size: 0.5rem;
        overflow: hidden;
        color: #999;
        > .name {
          padding-top: 0.4rem;
          color: #666;
          font-size: 0.6rem;
          font-weight: 600;
          line-height: 1rem;
        }
        > .close {
          float: right;
          color: #999;
          font-size: 0.6rem;
          line-height: 1rem;
        }
      }
      &.last {
        border: none;
      }
    }
  }
</style>

Step24. 權(quán)限檢查

我們想在進(jìn)入每個(gè)頁(yè)面的時(shí)候整葡，進(jìn)行權(quán)限檢查。之前我們已經(jīng)緩存了用戶登錄后的token讥脐，可以根據(jù)token來(lái)判斷是否登錄遭居。同時(shí)，配合路由白名單過(guò)濾掉那些不需要登錄即可訪問(wèn)的頁(yè)面旬渠。

我們修改src/main.js即可實(shí)現(xiàn)權(quán)限檢查俱萍，代碼如下：

/**********************************************/
/* src/main.js                                */
/**********************************************/

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import './config/rem'
import './style/index.scss';
import store from './store/index'

Vue.config.productionTip = false

// 不重定向白名單
const whiteList = ['/login', '/signup', '/forget', '/authredirect'];

// 權(quán)限檢查
router.beforeEach((to, from, next) => {
    document.title = (to.name || '') + ' - vue wap demo';
    next();
     if (store.getters.token) {
         if (to.path === '/login') {
             next({
                 path: '/messages'
             });
         } else {
            next();
        }
     } else {
         if (whiteList.indexOf(to.path) !== -1) {
             next()
         } else {
             next('/login')
         }
     }
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

更進(jìn)一步的檢查是“角色檢查”，是否有查看某頁(yè)面的權(quán)限告丢，此項(xiàng)目略枪蘑，請(qǐng)自己嘗試。

Step25. 頁(yè)面切換動(dòng)畫(huà)transition

實(shí)現(xiàn)頁(yè)面切換的動(dòng)畫(huà)效果芋齿，我們只要修改App.vue即可腥寇，代碼如下：

/**********************************************/
/* src/App.vue                                */
/**********************************************/

<template>
  <div id="app">
    <transition name="router-fade" mode="out-in">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
    </transition>
    <transition name="router-fade" mode="out-in">
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </transition>
    <!--所有用到的svg可以丟這里-->
    <svg-icon></svg-icon>
  </div>
</template>

<script>
  import svgIcon from '@/components/common/svg'
  export default {
    name: 'app',
    components: {
      svgIcon
    },
  }
</script>

<style lang="scss">
    .router-fade-enter-active,
    .router-fade-leave-active {
      transition: opacity 0.5s;
    }

    .router-fade-enter,
    .router-fade-leave-to {
      opacity: 0;
  }
</style>

目前這樣添加代碼，只有從login頁(yè)面登錄成功觅捆，跳入messages頁(yè)面的時(shí)候才有過(guò)渡動(dòng)畫(huà)。

如果你還需要在每個(gè)頁(yè)面之間有動(dòng)畫(huà)效果麻敌，需要在Layout.vue的代碼中作類似處理栅炒，可以嘗試一下。

Step26. 輪播展示

源碼中已包含术羔，稍后更新...

Step27. 分享功能

源碼中已包含赢赊，稍后更新...

Step28. ...

正在更新..

4.項(xiàng)目部署

項(xiàng)目部署，實(shí)際是部署一個(gè)靜態(tài)網(wǎng)站级历，打包生成的dist文件夾就是靜態(tài)網(wǎng)站的所有文件∈鸵疲現(xiàn)在，就來(lái)看一下如何部署寥殖。

a）本地部署

本地的話玩讳，就直接使用【MAMP】這個(gè)軟件吧，按步驟一步步安裝之后嚼贡，運(yùn)行起來(lái)基本就可以用了熏纯，不需要配置什么。

在“Hosts”那邊新增一個(gè)Server Name粤策，右邊唯一注意的就是把Name resolution的via Xip.io(LAN only)勾選上樟澜，這樣你就看到下面輸入框有個(gè)訪問(wèn)地址。在Document root選擇你指向的dist文件夾路徑(打包文生成的那個(gè))。運(yùn)行訪問(wèn)就OK了秩贰。

MAMP本地運(yùn)行.png

（在Mac霹俺，可以直接利用apache搭建一個(gè)的服務(wù)器，只要在Users/yourname/Sites這個(gè)目錄下的靜態(tài)網(wǎng)站毒费，都可以直接訪問(wèn)吭服，具體搭建可以查詢類似“在Mac上搭建本地Apache服務(wù)器”）

b）服務(wù)器部署

另外一種方式，就是找一個(gè)服務(wù)器進(jìn)行部署了蝗罗，比如亞馬遜云艇棕、阿里云、騰訊云等串塑。我只是玩過(guò)ubuntu和centOS沼琉，它們?cè)诎惭bnginx后的路徑、配置文件的路徑有些不一樣桩匪，只要找對(duì)了位置進(jìn)行配置就好了打瘪。

先把部署文件夾dist丟上服務(wù)器，之后再配置nginx的時(shí)候指向這個(gè)路徑就行了傻昙」肷В可以通過(guò)專門(mén)建一個(gè)放dist部署文件夾的git項(xiàng)目，這樣方便部署更新妆档。

先看下centOS服務(wù)器的：

# centOS上面的安裝配置大概就這幾行
# 遇到權(quán)限問(wèn)題切換admin安裝僻爽，也可以谷歌查詢解決方案

1、安裝nodeJS
curl --silent --location https://rpm.nodesource.com/setup_6.x | bash -
yum -y install nodejs

2贾惦、安裝nginx
sudo yum install epel-release
sudo yum install nginx
vi /etc/nginx/nginx.conf  //編輯配置文件
sudo /etc/init.d/nginx start  //啟動(dòng)
sudo /etc/init.d/nginx restart  //重啟
sudo /etc/init.d/nginx stop  //停止

3胸梆、配置文件內(nèi)容
# 修改server那一塊就好了
server {
    listen 80;
    server_name www.ma.h.fusio.net.cn;
    index index.html;
    root /data/web/apps/ma_front_dev/my-vue-demo-dist/dist;     // 這一行可以測(cè)試下不寫(xiě)
    location / {
       root /data/web/apps/ma_front_dev/my-vue-demo-dist/dist;
       try_files $uri $uri/ /index.html =404;
  }
}

下面則是ubuntu服務(wù)器的：

# ubuntu上面的安裝配置大概就這幾行
# 應(yīng)該比centOS遇到的問(wèn)題少一點(diǎn)

1、安裝nodeJS
curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo apt-get install -y build-essential

2须板、安裝nginx
sudo apt-get update
sudo apt-get install nginx
sudo vi /etc/nginx/sites-available/default   //編輯配置文件
sudo /etc/init.d/nginx start  //啟動(dòng)
sudo /etc/init.d/nginx restart  //重啟
sudo /etc/init.d/nginx stop  //停止

3碰镜、配置文件內(nèi)容
（同上）

5.后續(xù)

繼續(xù)補(bǔ)全一些功能，思考中...

寫(xiě)的倉(cāng)促习瑰，可能有些錯(cuò)誤绪颖，請(qǐng)留言指正...

學(xué)習(xí)是一條漫漫長(zhǎng)路，每天不求一大步甜奄，進(jìn)步一點(diǎn)點(diǎn)就是好的柠横。