//Name this code snippet  vue.config.js,Put it in the root directory of the project

//Just modify target Property the interface to access IP that will do


<br>// vue.config.js Configuration description
//official vue.config.js Reference documents https://cli.vuejs.org/zh/config/#css-loaderoptions
// Only a part is listed here. Refer to the document for specific configuration
module.exports = {
    // Deploy in production and development environments URL. 
    // By default, Vue CLI It will assume that your application is deployed on the root path of a domain name
    //for example https://www.my-app.com/. If the application is deployed on a sub path, you need to specify the sub path with this option. For example, if your application is deployed in https://www.my-app.com/my-app/，Then set baseUrl by /my-app/. 
    //baseUrl from Vue CLI 3.3 Deprecated, please use publicPath
    //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
     
    // outputDir: stay npm run build or yarn build Directory name of the generated file (to and baseUrl (consistent path of production environment)
    outputDir: "mycli3",
    //Used to place generated static resources (js,css,img,fonts) of (after the project is packaged, the static resources will be placed in this folder)
    assetsDir: "assets",
    //Specify generated index.html Output path for (After packaging, change the system default index.html File name for)
    // indexPath: "myIndex.html",
    //By default, generated static resources include hash In order to better control the cache. You can set this option to false To turn off file name hashing.(false The time is to keep the original file name unchanged)
    filenameHashing: false,
     
    // lintOnSave: { type:Boolean default:true } Ask if you use eslint
    lintOnSave: true,
    //If you want to disable it during production build eslint-loader，You can use the following configuration
    // lintOnSave: process.env.NODE_ENV !== 'production',
     
    //Whether to use the that contains the runtime compiler Vue Build version. Set to true Then you can Vue Used in components template Option, but this will add an additional 10 to your app kb about.(default false)
    // runtimeCompiler: false,
     
    /**
    * If you don't need the source map of the production environment, you can set it to false to speed up the construction of the production environment.
    * After packaging, it is found that the map file is too large and the volume of the project file is very large. If it is set to false, the map file can not be output
    * map The function of the file is: after the project is packaged, the code is compressed and encrypted. If an error is reported during operation, the output error information cannot accurately know where the error is reported.
    * With a map, you can output exactly which row and column are wrong like unencrypted code.
    * */
    productionSourceMap: false,
     
    // It supports webPack-dev-server All options for
    devServer: {
    host: "0.0.0.0",
    port: 8080, // Port number
    https: false, // https:{type:Boolean}
    open: true, //Configure auto start browser
    // proxy: 'http://localhost:4000' // Configure cross domain processing,Only one agent
     
    // Configure multiple agents
    proxy: {
    "/api": {
    target: "http://192.168.x.xxx:8090", // Interface domain name to access
    ws: true, // Enable websockets
    changeOrigin: true, //Start agent: a virtual server will be created locally, and then the requested data will be sent and received at the same time. In this way, the data interaction between the server and the server will not have cross domain problems
    pathRewrite: {
    "^/api": "" //It is understood here to be used'/api'replace target Inside address,For example, I want to call'http://40.00.100.100:3002/user/add'，direct writing'/api/user/add'that will do
    }
    }
    }
    }
    };

If according to Vue config. JS version:

'use strict'
const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const CompressionPlugin = require('compression-webpack-plugin')

const name = process.env.VUE_APP_TITLE || 'Yunlong flow direction system' // Page title

const port = process.env.port || process.env.npm_config_port || 80 // port

// vue.config.js Configuration description
//officialvue.config.js Reference documents https://cli.vuejs.org/zh/config/#css-loaderoptions
// Only a part is listed here. Refer to the document for specific configuration
module.exports = {
  // Deploy in production and development environmentsURL. 
// By default,Vue CLI It will assume that your application is deployed on the root path of a domain name
// for example https://www.ruoyi.vip/. If the application is deployed on a sub path, you need to specify the sub path with this option. For example, if your application is deployed in https://www.ruoyi.vip/admin/，Then set baseUrl by /admin/. 
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",
// staynpm run build or yarn build Directory name of the generated file (to andbaseUrlConsistent production environment path (default)dist)
outputDir: 'dist',
// Used to place generated static resources (js,css,img,fonts) of (after the project is packaged, the static resources will be placed in this folder)
assetsDir: 'static',
// OpeneslintSave detection, valid values:ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development',
// If you don't need a production environment source map，You can set it to false To accelerate the construction of production environment.
/**
   * If you don't need a production environment source map，You can set it to false To accelerate the construction of production environment.
* Found after packagingmapThe file is too large and the volume of the project file is very large. It is set tofalseYou can not outputmapfile
* mapThe function of the file is: after the project is packaged, the code is compressed and encrypted. If an error is reported during operation, the output error information cannot accurately know where the error is reported.
* YesmapLike unencrypted code, you can accurately output which row and column are wrong.
* */
productionSourceMap: false,
// webpack-dev-server Related configuration
devServer: {
    host: '0.0.0.0',
port: port,
open: true,
proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
          // thereprocess.env.VUE_APP_BASE_API replacetargetInside address ,For example, I want to call'http://40.00.100.100:3002/user/add'，direct writing'/process.env.VUE_APP_BASE_API/user/add'that will do
['^' + process.env.VUE_APP_BASE_API]: ''
}
      }
    },
disableHostCheck: true
},
css: {
    loaderOptions: {
      sass: {
        sassOptions: { outputStyle: "expanded" }
      }
    }
  },
configureWebpack: {
    name: name,
resolve: {
      alias: {
        '@': resolve('src')
      }
    },
plugins: [
      // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#usegzipExtract static files
new CompressionPlugin({
        test: /\.(js|css|html)?$/i,     // Compressed file format
filename: '[path].gz[query]',   // Compressed file name
algorithm: 'gzip',              // usegzipcompress
minRatio: 0.8                   // Compression ratio less than1Will compress
})
    ],
},
chainWebpack(config) {
    config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test

// set svg-sprite-loader
config.module
.rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()
    config.module
.rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
})
      .end()

    config
      .when(process.env.NODE_ENV !== 'development',
config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
            // `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/
}])
            .end()
          config
            .optimization.splitChunks({
              chunks: 'all',
cacheGroups: {
                libs: {
                  name: 'chunk-libs',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'initial' // only package third parties that are initially dependent
},
elementUI: {
                  name: 'chunk-elementUI', // split elementUI into a single package
priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
},
commons: {
                  name: 'chunk-commons',
test: resolve('src/components'), // can customize your rules
minChunks: 3, //  minimum common number
priority: 5,
reuseExistingChunk: true
}
              }
            })
          config.optimization.runtimeChunk('single'),
{
             from: path.resolve(__dirname, './public/robots.txt'), //Anti crawler file
to: './' //To the root directory
}
        }
      )
  }
}

/ / name this code fragment Vue config. JS and put it in the project root directory

//Just modify the IP address of the interface to be accessed by the target attribute