作為新手油湖，坑是少不了的！下面是我很榮幸跳的坑

目錄

結(jié)構(gòu)目錄

1.Vue Cli3 和Vue Cli2 區(qū)別

1.vue-cli 3 的 github 倉庫由原有獨(dú)立的 github 倉庫遷移到了 vue 項(xiàng)目下
2.vue-cli 3 的項(xiàng)目架構(gòu)完全拋棄了 vue-cli 2 的原有架構(gòu)府喳，3 的設(shè)計(jì)更加抽象和簡(jiǎn)潔（此處后續(xù)可以詳細(xì)介紹）
3.vue-cli 3 是基于 webpack 4 打造舱沧，vue-cli 2 還是 webapck 3
4.vue-cli 3 的設(shè)計(jì)原則是“0配置”
5.vue-cli 3 提供了 vue ui 命令玄窝，提供了可視化配置俩块，更加人性化

以上對(duì)我來說有這個(gè)東西就行了 我反正也沒有深入研究 哈哈哈 畢竟菜捎拯！

由于 vue-cli 3 也學(xué)習(xí)了 rollup 的零配置思路盲厌，所以項(xiàng)目初始化后署照，沒有了以前熟悉的 build 目錄，也就沒有了 webpack.base.config.js吗浩、webpack.dev.config.js 建芙、webpack.prod.config.js 等配置文件。

我還以為一直問怎么就沒有了build 我去哪里配置東西 真慚愧拓萌！

2.Vue.Config.js 怎么配置?

如何配置 vue-cli 3.0 的 vue.config.js
以上鏈接大佬個(gè)人主頁
vue cli3中文文檔
webpack-plugins
webpack-chain

附上我自己的配置（因人而異以下有的我都沒有真正實(shí)踐用過Ｋ甑觥！）

/**
    * *@2019-06-28
    * *@author xxx
    * *@describe vue-cli 3.x配置文件
    */
let ts = Date.parse(new Date());
const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    // 基本路徑
    publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
    // 用于嵌套生成的靜態(tài)資產(chǎn)（js,css,img,fonts）目錄
     assetsDir: 'front',
    // 指定生成的 index.html 的輸出路徑 (相對(duì)于 outputDir)。也可以是一個(gè)絕對(duì)路徑
    indexPath: 'index.html', // Default: 'index.html'
    // 輸出文件目錄
    outputDir: 'dist', // 默認(rèn)dist
    filenameHashing: true,
    // 構(gòu)建多頁時(shí)使用
    pages: undefined,
    // eslint-loader是否在保存的時(shí)候檢查
    lintOnSave: true,
    // 是否使用包含運(yùn)行時(shí)編譯器的Vue核心的構(gòu)建
    runtimeCompiler: false,
    // 默認(rèn)情況下 babel-loader 會(huì)忽略所有 node_modules 中的文件屡限。如果你想要通過 Babel 顯式轉(zhuǎn)譯一個(gè)依賴品嚣，可以在這個(gè)選項(xiàng)中列出來
    transpileDependencies: [],
    // 如果你不需要生產(chǎn)環(huán)境的 source map，可以將其設(shè)置為 false 以加速生產(chǎn)環(huán)境構(gòu)建钧大。
    productionSourceMap: false,
    // 如果這個(gè)值是一個(gè)對(duì)象翰撑，則會(huì)通過 webpack-merge 合并到最終的配置中。如果這個(gè)值是一個(gè)函數(shù)啊央，則會(huì)接收被解析的配置作為參數(shù)眶诈。該函數(shù)及可以修改配置并不返回任何東西，也可以返回一個(gè)被克隆或合并過的配置版本瓜饥。
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            console.log(process.env.NODE_ENV);
            // 為生產(chǎn)環(huán)境修改配置...
        } else {
            // 為開發(fā)環(huán)境修改配置...
        }
    },
    // 是一個(gè)函數(shù)逝撬，會(huì)接收一個(gè)基于 webpack-chain 的 ChainableConfig 實(shí)例。允許對(duì)內(nèi)部的 webpack 配置進(jìn)行更細(xì)粒度的修改乓土。
    chainWebpack: (config) => {
        if(process.env.VUE_APP_MODE == 'development'){
            config.plugin('compress')
            .use(FileManagerPlugin, [{
                onEnd: {
                    delete: [ //首先需要?jiǎng)h除項(xiàng)目根目錄下的dist.zip
                        './*.zip',
                    ],
                    archive: [ //然后我們選擇dist文件夾將之打包成dist.zip并放在根目錄
                        {source: './dist', destination: `./biProject-${ts}-production.zip`},
                        {source: './beta', destination: `./biProject-${ts}-test.zip`}
                    ]
                }
            }])
        }   
        // 配置路徑別名宪潮，你可以自己再加，按這種格式.set('', resolve(''))
        config.resolve.alias
        .set('@', resolve('src'))
        .set('@assets',resolve('src/assets'))

    },
    // css相關(guān)配置
    css: {
        // 啟用 CSS modules
        modules: false,
        // 是否使用css分離插件
        extract: true,
        // 開啟 CSS source maps?
        sourceMap: false,
        // css預(yù)設(shè)器配置項(xiàng)
        loaderOptions: {},
    },
    // webpack-dev-server 相關(guān)配置
    devServer: {
        host: '0.0.0.0',
        port: 8080,
        https: false,
        open: true,
        hotOnly: false,
        // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個(gè)代理
          proxy: {
            '/api/': {
              target: '域名',   //代理接口
              changeOrigin: true,
              pathRewrite: {
                '^/api': ''   //代理的路徑
              }
          }
        },
        // 設(shè)置代理
        before: app => {},
    },
    // PWA 插件相關(guān)配置
    pwa: {},
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
}

3.axios安裝使用

1.安裝
npm install axios ---ajax
npm install qs ---序列化
2.全局使用
同級(jí)目錄新建文件https.js
在main.js使用以下引入并全局使用
----------不要使用use--------
import https from './https.js'
Vue.prototype.$https=https

image.png

這邊是使用已封裝好的axios
----------------------
https.js 內(nèi)容如下：
具體內(nèi)容還沒有去理解（會(huì)用就行趣苏，后面再去理解如何封裝）
------------------
import axios from 'axios'
import qs from 'qs'

//以下是發(fā)生跨域使用--還沒有實(shí)踐
//axios.defaults.timeout = 5000;                        //響應(yīng)時(shí)間
//axios.defaults.headers.common['userKey'] = localStorage.token;
//axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded' //配置請(qǐng)求頭
//axios.defaults.baseURL = '域名';   //配置接口地址

//POST傳參序列化(添加請(qǐng)求攔截器)
axios.interceptors.request.use((config) => {
    //在發(fā)送請(qǐng)求之前做某件事
    if(config.method  === 'post'){
        config.data = qs.stringify(config.data);
    }
    return config;
},(error) =>{
    console.log('錯(cuò)誤的傳參');
    return Promise.reject(error);
});

//返回狀態(tài)判斷(添加響應(yīng)攔截器)
axios.interceptors.response.use((res) =>{
    //對(duì)響應(yīng)數(shù)據(jù)做些事
    if(!res.data.success){
        return Promise.resolve(res);
    }
    return res;
}, (err) => {
        if (err && err.response) {
          switch (err.response.status) {
            case 400:
                console.log('錯(cuò)誤請(qǐng)求')
              break;
            case 401:
                console.log('未授權(quán)狡相，請(qǐng)重新登錄')
              break;
            case 403:
              console.log('拒絕訪問')
              break;
            case 404:
              console.log('請(qǐng)求錯(cuò)誤,未找到該資源')
              break;
            case 405:
              console.log('請(qǐng)求方法未允許')
              break;
            case 408:
              console.log('請(qǐng)求超時(shí)')
              break;
            case 500:
              console.log('服務(wù)器端出錯(cuò)')
              break;
            case 501:
              console.log('網(wǎng)絡(luò)未實(shí)現(xiàn)')
              break;
            case 502:
              console.log('網(wǎng)絡(luò)錯(cuò)誤')
              break;
            case 503:
              console.log('服務(wù)不可用')
              break;
            case 504:
              console.log('網(wǎng)絡(luò)超時(shí)')
              break;
            case 505:
              console.log('http版本不支持該請(qǐng)求')
              break;
            default:
              console.log(`連接錯(cuò)誤${err.response.status}`)
          }
        } else {
          console.log('連接到服務(wù)器失敗')
        }
        // return Promise.resolve(err.response)
    return Promise.reject(err);
});

//返回一個(gè)Promise(發(fā)送post請(qǐng)求)
export function fetchPost(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
        .then(response => {
            resolve(response);
        }, err => {
            reject(err);
        })
        .catch((error) => {
            reject(error)
        })
    })
}
////返回一個(gè)Promise(發(fā)送get請(qǐng)求)
export function fetchGet(url, param) {
    return new Promise((resolve, reject) => {
        axios.get(url, {params: param})
        .then(response => {
            resolve(response)
        }, err => {
            reject(err)
        })
        .catch((error) => {
            reject(error)
        })
    })
}
//暴露出口
export default {
    axios,
    fetchPost,
    fetchGet
}

組件使用：
.....
  created (){
    this.loginPost();
  },
  methods: {
      loginPost: function () {
          this.$https.fetchPost("/index.php/index/index",'').then(res => {
              console.log(res);
          }, res => {
              console.info('調(diào)用失敗');
          })
      }
  },
.......

4.Vue和Tp5 共享同一路由

起因：

• 訪問www.xxxx.com進(jìn)入前端頁面（vue項(xiàng)目）
• www.xxxx.com/admin.php/login 進(jìn)入后臺(tái)登陸界面（Tp5項(xiàng)目）
• 但是因?yàn)橹挥幸粋€(gè)域名，所有每一次去訪問域名則返回內(nèi)容是 TP5 -> index方法返回的數(shù)據(jù)
  根本沒辦法返回?cái)?shù)據(jù)至前端頁面 也打不開vue前端頁面

參考文章

[原理]vue和tp5有自己的路由食磕，但是tp5用來做數(shù)據(jù)端就不需要這個(gè)了尽棕，直接設(shè)置為vue的nginx配置即可

4.1 nginx偽靜態(tài)配置：

nginx偽靜態(tài)配置

直接復(fù)制：
-------
location / {
  try_files $uri $uri/ /index.html;
}
location ~ ^/(thinkphp|vendor/phpunit|application|runtime)/.*\.php
{
    return 404;
}

4.2nginx默認(rèn)文件配置：

默認(rèn)文件配置

設(shè)置優(yōu)先級(jí)

4.3將打包好的vue文件包dist上傳到public目錄下并解壓：

4.3請(qǐng)求接口

原本：/api/index/index
      loginPost: function () {
          this.$https.fetchPost("/index.php/index/index",'').then(res => {
              console.log(res);
          }, res => {
              console.info('調(diào)用失敗');
          })
      }

線上測(cè)試結(jié)果

返回前端數(shù)據(jù)

以上配置后--本地環(huán)境與線上環(huán)境獲取數(shù)據(jù)

• 本地環(huán)境

  methods: {
    loginPost: function() {
      this.$https.fetchPost("/api/index.php/index/index", "").then(res => {
          console.log(res.data);
        },
        res => {
          console.info("調(diào)用失敗");
        }
      );
    },
  }

• 線上環(huán)境

  methods: {
    loginPost: function() {
      this.$https.fetchPost("index.php/index/index", "").then(res => {
          console.log(res.data);
        },
        res => {
          console.info("調(diào)用失敗");
        }
      );
    },
  }