Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "vue project how to achieve webpack configuration agent", the content is detailed, the steps are clear, the details are handled properly, I hope this "vue project how to achieve webpack configuration agent" article can help you solve your doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Webpack configure proxy to resolve cross-domain

Index.js file configuration in the config folder

ProxyTable: {/ / local test interface'/': {target: 'http://xx.xx.xx.xx', changeOrigin: true, secure: false}}

Sample code:

Module.exports = {dev: {/ / Paths assetsSubDirectory: 'static', assetsPublicPath:' /', proxyTable: {/ / local test interface'/': {target: 'http://xx.xx.xx.xx', changeOrigin: true, secure: false}}, / / 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- / * 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: true, / / 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} vue cross-domain problem.

First confirm that axios is installed, installation method: cnpm install axios-S or do not need to mirror npm install axios

Dev: {undefined

/ / PathsassetsSubDirectory: 'static',assetsPublicPath:' /', proxyTable: {'/ api': {target: 'http://40.73.37.92:8090/',// sets the domain name and port number of the interface you call. Don't forget to add http changeOrigin: true, pathRewrite: {' ^ / api':'/ / here it means to replace the address in target with'/ api'. When we drop the interface in the later components, we directly use api instead. For example, if I want to call 'http://40.00.100.100:3002/user/add', just write' / api/user/add''}, and the usage of the interface request

Read this, the "vue project how to achieve webpack configuration agent" article has been introduced, want to master the knowledge of this article still need to practice and use to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.