20190429 动态配置前端

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
         target: 'http://localhost:8888',//本地测试
        //target: 'http://192.168.1.39:8888',//服务器测试
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // 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: true,
    // 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
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

// 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 twoindex from './components/manage/twoindex.vue'
import ElementUI from 'element-ui'
import store from './store.js'
import '../static/css/theme-green/index.css'
import './css/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css'
// 引用axios，并设置基础URL为后端服务api地址
var axios = require('axios')
//axios.defaults.baseURL = 'http://localhost:8888/api'//本地测试
//axios.defaults.baseURL = 'http://192.168.1.39:8888/api'//服务器测试
//axios.defaults.baseURL = 'http://192.168.1.197:8888/api'//服务器测试

//获取当前登录页面url http://localhost:8080/#/login    http://192.168.1.197:8080/#/login

var url = location.href;//url ="http://192.168.1.197:8080/#/login";
console.log("location.href:"+location.href);

var str = url.substring(url.indexOf('http://'),url.indexOf(':8080'));
console.log("Str="+str);

str = str.substring(7,str.length);
console.log("Str="+str);

var ip =str;
/*var ip = url.substring(7,url.length);
if(ip.startsWith("localhost:8080")){
  console.log("当前是本地登录，服务器登录需要切换");
  ip =ip.substring(0,9);
}else{//192.168.1.197:8080/#/login
  console.log("现在是服务器登录");
  ip =ip.substring(0,13);//只有服务时需要用到，本地缓存localhost
}*/
console.log(ip);

axios.defaults.baseURL = "http://"+ip+":8888/api";//公共配置

// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.use(ElementUI)
Vue.config.productionTip = false

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

 

神宝：

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  themePath: path.resolve(__dirname, '../src/theme/theme.less'),
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: './static',
    assetsPublicPath: './',
    productionSourceMap: true,
    devtool: '#source-map',
    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: require('./dev.env'),
    port: 8077,
    //port: 8077,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',//修改assetsPublicPath:'./' ,修改目的是为了解决js找不到的问题
    proxyTable: {
      //配置跨域
      "/api": {//以/api/为开头的适合这个规则
        target: 'http://localhost:8081',//本地测试 20190429更改
       //(原来的) target: "http://127.0.0.1:8081",//目标地址  跨域地址  第三方调用接口
        //target: "http://39.107.86.138:8081",//目标地址  跨域地址  第三方调用接口
        "secure": false,//false为http访问，true为https访问
        "changeOrigin": true,//跨域访问设置，true代表跨域
        "pathRewrite": {//路径改写规则
          "^/api": ""//以/api/为开头的改写为''
          //下面这种也行
          //  "^/api":"/list"//以/api/为开头的改写为'/list'
        },
        "headers": {//设置请求头伪装成手机端的访问
          "User-Agent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Mobile Safari/537.36"
        }
      }

    },
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }
}

 

import Vue from 'vue'
import App from './App'
import './filters'
import store from './store'
import router from './router'
import ElementUI from 'element-ui'
import VueResource from 'vue-resource'
import momentPlugin from './libs/$moment'
import videojsPlugin from './libs/$video'
import VueLocalStorage from 'vue-localstorage'
import * as Types from './store/mutation-types'
import echarts from 'echarts'
Vue.prototype.$echarts=echarts;

import eventHub from './eventHub'

//在main.js内
import VideoPlayer from 'vue-video-player'

// rtmp播放器
require('videojs-flash');
require('./libs/videojs-contrib-hls.min.js')

// 第一个是videoJs的样式，后一个是vue-video-player的样式，因为考虑到我其他业务组件可能也会用到视频播放，所以就放在了main.js内
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

import 'element-ui/lib/theme-default/index.css'
import 'video.js/dist/video-js.min.css'
import 'openlayers/dist/ol.css'



// 添加插件
Vue.use(ElementUI)
Vue.use(VueLocalStorage)
Vue.use(momentPlugin)
Vue.use(videojsPlugin)
Vue.use(VueResource)

//把VueVideoPlayer导入并挂在到vue上
Vue.use(VideoPlayer);


// API config 设置请求的跟路径头
// Vue.http.options.root = 'http://139.196.233.53:8080/api/';
// Vue.http.options.root = 'http://localhost:8088/api/';
// Vue.http.options.root = 'http://192.168.1.109:8080/api/';
// Vue.http.options.root = 'http://192.168.3.220:8080/api/';

//Vue.http.options.root = 'http://192.168.50.13:8081/api/';//银河
//Vue.http.options.root = 'http://10.38.173.248:8081/api/';//内蒙服务器
//Vue.http.options.root = 'http://188.131.137.119:8081/api/';//个人腾讯云测试
//Vue.http.options.root = 'http://39.107.86.138:8081/api/';//公司服务器
//(原来的)Vue.http.options.root = 'http://127.0.0.1:8081/api/';//本地
//Vue.http.options.root = 'http://:8081/api/';//设置vue前台的拦截 token 从缓存中获取token，有token设置header,设置status并在错误时返回


//20190429新调整
//获取当前登录页面url http://localhost:8080/#/login    http://192.168.1.197:8080/#/login
var url = location.href;//url ="http://192.168.1.197:8080/#/login";
console.log("location.href:"+location.href);

var str = url.substring(url.indexOf('http://'),url.indexOf(':8081'));
console.log("Str="+str);

str = str.substring(7,str.length);
console.log("Str="+str);

var ip =str;
console.log(ip);

Vue.http.options.root = 'http://"+ip+":8081/api/';//公共配置



Vue.http.interceptors.push((request, next) => {
  const token = window.localStorage.getItem('GALAXY_SPACE_SESSION_TOKEN');
  if (token) {
    request.headers.set('GALAXY_SPACE_SESSION_TOKEN', token)
  }
  next((response)=>{
    const status = response.status;
    if( status == 401 ){
      eventHub.$emit('authentication_failed')
    }
  });
})

Vue.config.productionTip = false

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

配置成功跑起来了，不知道为什么莫名的喜欢linux的黑窗口，哈哈。