怎么配置vue才可以让他在修改devServer的后台地址时不需要再次重启项目？

Question

这是我现在vue.config.js的配置。
我看别人的项目有config文件夹，那个是需要弄得吗？
现在的目录结构：

const path = require("path");
const Timestamp = new Date().getTime();
// const selfSigned = require('openssl-self-signed-certificate');
module.exports = {
  // type :string  defalut :"/"
  // 把开发服务器架设在根路径
  // publicPath: process.env.NODE_ENV === "production" ? "/" : "/",

  // type :string  defalut :"dist"
  // 打包后的文件夹名字
  outputDir: "dist",

  // type :string  defalut :""
  // 静态资源目录
  assetsDir: "assets",

  // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
  filenameHashing: true,

  // 设置单页面与多页面
  // 具体情况看官网 https://cli.vuejs.org/zh/config/#pages
  pages: {
    index: {
      // page 的入口
      entry: "src/main.js",
      // 模板来源
      template: "public/index.html",
      // 在 dist/index.html 的输出
      filename: "index.html",
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: "调控云数据校核系统",
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "index"]
    }
  },

  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,

  // 是否使用包含运行时编译器的Vue核心的构建
  runtimeCompiler: false,

  // 默认情况下 babel-loader 忽略其中的所有文件 node_modules
  transpileDependencies: [],

  // 生产环境 sourceMap
  productionSourceMap: false,

  // cors 相关 https://jakearchibald.com/2017/es-modules-in-browsers/#always-cors
  // corsUseCredentials: false,
  // webpack 配置，键值对象时会合并配置，为方法时会改写配置
  // https://cli.vuejs.org/guide/webpack.html#simple-configuration
  // configureWebpack: (config) => {},
  configureWebpack: {
    // webpack 配置
    output: {
      // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
      // filename: `js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
      // chunkFilename: `js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
      filename: `js/[name].${Timestamp}.js`,
      chunkFilename: `js/[name].${Timestamp}.js`
    },
    // plugins: [
    //   new CopyWebpackPlugin({
    //     patterns: [
    //       {
    //         from: "./public/static",
    //         to: `static_${timesTamp}`
    //       }
    //     ]
    //   })
    // ]
  },

  // webpack 链接 API，用于生成和修改 webapck 配置
  // https://github.com/mozilla-neutrino/webpack-chain
  // chainWebpack: (config) => {
  //   // 因为是多页面，所以取消 chunks，每个页面只对应一个单独的 JS / CSS
  //   config.optimization.splitChunks({
  //     cacheGroups: {},
  //   });

  //   // 'src/lib' 目录下为外部库文件，不参与 eslint 检测
  //   config.module
  //     .rule("eslint")
  //     .exclude.add("/Users/maybexia/Downloads/FE/community_built-in/src/lib")
  //     .end();
  // },

  // 配置高于chainWebpack中关于 css loader 的配置
  // 具体细节查看 https://cli.vuejs.org/zh/guide/webpack.html#链式操作(高级)
  css: {
    // 是否开启支持 foo.module.css 样式
    // modules: false,  // 已被弃用
    // 是否使用 css 分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用 <style> 方式内联至 html 文件中
    // extract: true, // 这个属性把style提取至独立的css文件了，而不是动态注入javascipt中。会导致页面不自动刷新
    // 是否构建样式地图，false 将提高构建速度
    sourceMap: false,
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  },

  // 开发配置
  // 细节查看 https://webpack.js.org/configuration/dev-server/#devserver
  devServer: {
    open: true,
    hot: true,
    host: "127.0.1.1",
    port: "8383",
    // https: true,
    // https: {
    //   key: selfSigned.key,
    //   cert: selfSigned.cert
    // },
    // historyApiFallback: true,
    // https: false, // 这是前台模拟的 https ，真正的是 后台在服务器配置 https
    // proxy: "http://192.168.3.xxx:xxx",
    proxy: {
      "/": {
        target: "http://192.168.xx.xxx:8888", // 代理接口 (注意只要域名就够了)
        changeOrigin: true, // 是否在本机创建target地址的虚拟服务，避免跨域问题
        // logLevel: 'debug', // 是否为调试
        pathRewrite: {
          "^/": "/" //代理路径
        }
      }
    }
  },

  // 构建时开启多进程处理 babel 编译
  parallel: require("os").cpus().length > 1,

  // https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},

  // 第三方插件配置
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "src/assets/less/global.less")]
      // injector: 'append' // 'prepend' 或者 'append'  表示资源导入的位置，在之前还是之后
    }
  },

  // 做预览本地pdf webpack 不认识pdf文件,要处理
  chainWebpack: config => {
    const fileRule = config.module.rule("file");
    fileRule.uses.clear();
    fileRule
      .test(/\.pdf|ico$/)
      .use("file-loader")
      .loader("file-loader")
      .options({
        limit: 10000
      });
  }
};

Answer 1

理论上是可以实现的，就是比较麻烦。与投入比较起来，解决的是一个不紧急的需求，投入产出比不高。

1. devServer有个before字段，可以拦截所有请求，你可以在这里做文章。每次接到请求，动态读取一个代理api网站配置文件——即用fs去读取，而不是require。
2. 引入proxy中间件，每次都将特定请求代理到上一步获取到的api网站。

实际有更简单的办法，使用nginx代理，devServer代理到nginx，nginx代理到动态的api网站，修改配置文件后，重启nginx（这一步也可以做成自动化，使用nodemoon监视配置文件，变动时用fs修改nginx配置，再通过child_process重启nginx）devServer可以毫无感知。

Answer 2

本来就需要重启喔，最多也只是run dev / run test取不同的配置而已

Answer 3

在main.js设置

axios.defaults.baseURL = process.env.NODE_ENV === 'development'?'开发环境':'生产环境';

Answer 4

config/env.development.js

module.exports = {
  base_url: 'http://api.example.com'
}

config/index.js

const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

const { base_uri } from '@/config'
const service = axios.create({
  baseURL: base_url
})

Answer 5

赞成 redbuck 的回答，理论上是能实现的。

类似的还有需求场景很多呀，基本上配置相关的内容修改之后都需要重启。那么方案想起来就有如下几种

1. 指向一个代理服务，然后改代理服务的（脱裤子放屁，工作量没少。当然大佬给出的watch的方案的确行得通）
2. 查看 http-proxy-middleware，看看是否支持 function ，有没有动态修改的方案。看上去 router、Rewrite 支持。（看上去只能通过钩子了）
3. 自己实现一个代理（你想咋写咋写，想咋更新咋更新）
4. 无敌大法，把 npm run start 换成另一个服务，然后 watch 所有配置文件，有更新就自动重启项目。(watch 千万别加 src 目录，不然光重启了。思路来源于 pm2 )

Answer 6

如果是后台地址改变了，不想重启前端代码并打包，可以做下面配置
1、在static文件夹新建一个config.js，打包后生成的相同名文件夹，更改里面值就可以了

window.global_config = {
BASE_URL: ' http://xx.xx.x.x:9000'
};
2、在index.html文件里引入config.js

<script src="./static/config.js"></script>

3、封装的axios里的baseURL写成global_config.BASE_URL

const service = axios.create({
baseURL: global_config.BASE_URL, // api 的 base_url
timeout: 20000 // 请求超时时间
})

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。

Answer 7

我遇到了类似的问题，https://blog.csdn.net/weixin_... 参考这个方法解决了，希望能帮到你。