在Vue项目的根目录下创建一个vue.config.js文件,并添加以下代码:
- module.exports = {
- devServer: {
- proxy: {
- '/': {
- target: '目标服务器地址',
- changeOrigin: true,
- pathRewrite: {
- '^/': ''
- }
- }
- }
- }
- }
上述代码中,我们使用devServer
配置项来配置代理服务器。其中proxy
属性用于配置代理的规则,/api
表示需要代理的接口路径。target
属性表示代理的目标服务器地址,changeOrigin
属性表示是否改变请求的源地址,pathRewrite
属性用于重写请求的路径。
vue2在config文件中的index.js文件中进行修改
- 'use strict'
- // Template version: 1.3.1
- // see http://vuejs-templates.github.io/webpack for documentation.
-
- const path = require('path')
-
- module.exports = {
- dev: {
- // Paths
- assetsSubDirectory: 'static',
- assetsPublicPath: '/',
- proxyTable: {
- "/": {
- target: "http://localhost:9033", // 接口的域名
- changeOrigin: true, // 是否跨域
- WS:true,
- secure: false, // 如果是https接口,需要配置这个参数
- pathRewrite: {
- "^/": "", // 路径重写替换为空
- },
- },
-
- },
-
- // Various Dev Server settings
- host: '0.0.0.0', // 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-
-
- // Use Eslint Loader?
- // If true, your code will be linted during bundling and
- // linting errors and warnings will be shown in the console.
- useEslint: true,
- // If true, eslint errors and warnings will also be shown in the error overlay
- // in the browser.
- showEslintErrorsInOverlay: false,
-
- /**
- * 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
- }
- }