Vue-cli项目里配置内网外访问

在进行为了方便进行内外网访问，需做以下相关配置
1、vue.config.js配置如下：

const webpack = require('webpack')
// const path = require('path')
// function resolve(dir) {
//   return path.join(__dirname, '..'1, dir)
// }
module.exports = {
  lintOnSave: false,
  publicPath: './', // 部署项目路径
  devServer: {
    port: 8088, // 端口号
    open: false, //配置自动启动浏览器
    proxy: {
      '/项目名称': {
        target: '你的项目服务器内网地址:端口/项目名称',//内网
        /*target: '你的项目服务器外网地址:端口/项目名称',//外网*/
        /*target: '你的项目本地联调地址:端口号/', // 本地测试*/
        changeOrigin: true,
        pathRewrite: {
          '^/项目名称': '/'
        }
      }
    }
  },
  configureWebpack: {
    // webpack 配置项 根据需求 按需配置即可
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery'
      })
    ]
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/css/global.scss";`
      },
    }
  }
}

2、根据需求配置store/index.js:

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    /*定义组件间通信变量*/
    dayEvents:[],
    dayTaskShow:false,
  },
  mutations: {},
  actions: {},
  modules: {}
});

3、main.js里面引入store：

import store from "./store";

接下来就可以进行内外网访问了，实现前后端接口调用可以省略公共部分进行调用访问。