vue2 项目配置上线

config/index 配置

  dev: {
    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      // 这里配置 '/api' 就等价于 target , 你在链接里访问 /api === http://localhost:54321
      '/api': {
        target: 'http://127.0.0.1:80/', // 真是服务器的接口地址 // http://localhost:54321/json.data.json,
        // secure: true, // 如果是 https ,需要开启这个选项
        changeOrigin: true, // 是否是跨域请求?肯定是啊,不跨域就没有必要配置这个proxyTable了.
        withCredentials:true,// 是否携带cookie
        logLevel:'debug',
        clientLogLevel: 'debug',
        pathRewrite: {
          // 这里是追加链接,比如真是接口里包含了 /api,就需要这样配置.
          '^/api': ''
        }
      }
    },
    // Various Dev Server settings
    host: '127.0.0.1', // can be overwritten by process.env.HOST
    port: 9090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: false,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

在src/axios/index.js

import axios from 'axios'

axios.create({
  // baseURL:readPath , // 设置服务器地址
  timeout: 60 * 1000, // 超时设置
  withCredentials: true, // 检查跨站点访问控制
  changeOrigin: true// 允许跨域
})


// axios.defaults.baseURL = env === 'development' ? '/api' : window.location.protocol + '//' + window.location.host; // 配置axios请求的地址
// axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
axios.defaults.crossDomain = true;
axios.defaults.withCredentials = true;  //设置cross跨域 并设置访问权限 允许跨域携带cookie信息


axios.interceptors.request.use(
  request => {
    // request.headers['access_token'] = '123456789'
    console.log('正在拦截请求。。。。。。。。。')
    console.log(request)
    return request
  },
  error => {
    console.log("报错了。。。")
    return Promise.reject(error)
  }
)
axios.interceptors.response.use(
  response => {
    console.log('响应啦。。。')
    console.log(response)
    return response
  },
  error => {
    console.log("响应异常啦。。。")
    return Promise.reject(error)
  }
)

export default axios

在main.js 中配置

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from './axios'
// import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.config.productionTip = false

// axios.defaults.crossDomain = true;
// axios.defaults.withCredentials = true;
// axios.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
Vue.use(VueAxios, axios)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

将文件dist 上传至 nginx 文件目录下

在nginx 中confi/nginx.conf配置

   35     server {
     36         listen       80;
     37         server_name  localhost;
     38 
     39         #charset koi8-r;
     40 
     41         #access_log  logs/host.access.log  main;
     42 
     43         location / {
     44             root   dist;
     45             index  index.html ;
     46         }
     47 
     48          location /api {  #4.当请求跨域时配置端口转发
     49             proxy_pass http://192.168.31.34/; #5.转发地址注意尾部要加上/ 否则出出现请求是192.168.31.34/api/xxxx ,实际真实是 192.168.31.34/xxxx
     50         }
     }