VUE configuration file VUE config. JS configure front-end agent - important

 //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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<br>// vue. config. JS configuration description
//Official Vue config. JS reference document https://cli.vuejs.org/zh/config/#css-loaderoptions
//Only a part is listed here. Refer to the document for specific configuration
module.exports = {
/ / deploy URL s in production and development environments.
/ / by default, Vue CLI 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/ , set baseUrl to / my app /.
/ / baseUrl deprecated since Vue CLI 3.3, please use publicPath
    //baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
     
/ / outputDir: when npm run build or yarn build, the directory name of the generated file (consistent with the production environment path of baseUrl)
    outputDir: "mycli3",
/ / used to place the generated static resources (js, css, img, fonts); (after the project is packaged, the static resources will be placed in this folder)
    assetsDir: "assets",
/ / specify the generated index HTML output path (after packaging, change the system default file name of index.html)
    // indexPath: "myIndex.html",
/ / by default, the generated static resources include a hash in their file names to better control the cache. You can turn off file name hashing by setting this option to false. (false is to keep the original file name unchanged)
    filenameHashing: false,
     
/ / lintOnSave: {type:Boolean default:true} asks whether you use eslint
    lintOnSave: true,
/ / if you want to disable eslint loader during production build, you can use the following configuration
    // lintOnSave: process.env.NODE_ENV !== 'production',
     
/ / whether to use Vue build with runtime compiler. When set to true, you can use the template option in Vue components, but this will add about 10kb to your application. (default is false)
    // runtimeCompiler: false,
     
    /**
* if you do not 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
* the function of the map 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 accurately output which row and column are wrong like unencrypted code.
    * */
    productionSourceMap: false,
     
/ / it supports all options of webpack dev server
    devServer: {
    host: "0.0.0.0",
port: 8080, / / port number
    https: false, // https:{type:Boolean}
open: true, / / configure automatic browser startup
    // proxy: 'http://localhost:4000 '/ / configure cross domain processing. There is only one agent
     
/ / configure multiple agents
    proxy: {
    "/api": {
    target: " http://192.168.x.xxx:8090 ", / / the domain name of the interface to be accessed
ws: true, / / whether to enable websockets
changeOrigin: true, / / start the 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 that '/ api' is used instead of the address in the target. For example, I want to call ' http://40.00.100.100:3002/user/add ', just write' / api/user/add 'directly
    }
    }
    }
    }
    };

Keywords: Vue cross-domain

Added by mdomel on Tue, 11 Jan 2022 11:31:52 +0200