vue-cli2.0腳手架 移動端項目總結（環境構建、本地開發及線上部署）

移動端項目預覽地址：http://47.106.166.17:5200/

一、環境構建

1. 全局安裝 vue-cli

npm install –global vue-cli

2. 創建一個基於 webpack 模板的新項目

vue init webpack my-project

3. 安裝依賴，走你

cd my-project
npm install

4. 運作

npm run dev

二、本地開發

1. 接口代理

• 配置修改 config/index.js

proxyTable: {
    '/apis': {
        target: 'http://www.***.com/',//代理接口域名
      //secure: false,  // 如果是https接口，需要配置這個參數
        changeOrigin: true,// 如果接口跨域，需要進行這個參數配置
        pathRewrite: {
            '^/apis': ''
        }
    }
}

• 實例

/data3/fast/login ---> /apis/data3/fast/login

2. 引用jquery

• 配置修改 build/webpack.base.conf.js

module.exports = {
 plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
}

• 引入 src/main.js

import $ from 'jquery'

3. 後端交互數據插件

3.1 vue-resource

• 安裝 vue-resource

npm install vue-resource

• 引入vue-resource

import VueResource from 'vue-resource';
Vue.use(VueResource);

3.2 axios

• vue-resource 替換爲 axios

  原因： vuejs2.0已經不在維護vue-resource了，vuejs2.0 已經使用了axios了

• 安裝 axios

npm install axios

• 引入axios

import axios from 'axios'
Object.defineProperty(Vue.prototype, '$http', {
    value: axios
})

3.3 替換時注意 ：

• axios 與 vue-resource請求 ,返回數據層不同

#axios
this.$http.post('/apis/data/base/count').then(res => {
   this.items = res.data.data;## 區別
}, res => {
   console.info('調用失敗');
});
#vue-resource
this.$http.post('/apis/data/base/count').then(res => {
   this.items = res.data; ## 區別
}, res => {
   console.info('調用失敗');
});

• axios 不支持 跨域jsonp請求 ，解決辦法 如下

#安裝
npm install jsonp
#引入
import jsonp from 'jsonp'
Vue.prototype.jsonp = jsonp
#實例
this.jsonp('http://api.map.baidu.com/location/ip?ak=yZSTYLk9UUvs0ZqXqBbtTp8ViKk5vxLM', null, (err, res) => {
   ...
});

三、線上部署

注：阿里雲服務器無需comcat，但要添加防火牆規則，以防端口被禁止訪問

1. 部署打包

1.1 打包命令

npm run build  

1.2 部署包 根目錄下dist文件

2 線上nginx 配置

2.1 nginx安裝、重啓

2.2 nginx 配置修改 nginx/conf/nginx.conf

server {
     listen       端口;
     server_name  訪問域名;

     location / {
         root   線上靜態路徑; //示例 /root/lc/dist #注意：用‘/’
         index  index.html index.htm;
         try_files $uri $uri/ /index.html;  //解決子頁面適配，刷新404問題
     }

     location /apis {
        proxy_pass http://www.***.com/; //代理接口域名
     }
}

• 重啓nginx即可

四、標籤頁圖標favicon報錯問題

1.修改配置 build/webpack.dev.conf.js

var path = require('path')
module.exports = merge(baseWebpackConfig, {
 plugins: [ 
     new HtmlWebpackPlugin({
       filename: 'index.html',
       template: 'index.html',
       inject: true,
       favicon: path.resolve('favicon.ico') // 增加
     }),
  ]
})

2.favicon.ico 存放根目錄

3.index.html引入路徑

<link rel="icon" href="/favicon.ico">

五、總結注意

1.vue-resource 替換爲 axios，以及跨域安裝jsonp
2.nginx路徑配置
3.阿里雲防火牆端口限制
4.標籤頁圖標favicon報錯問題
5.子頁面刷新404問題( 見上nginx 配置try_files)