vue项目开发期间，配置webpack解决后台接口在不同服务器上的问题

1、在 .env.development 文件下修改为

    
    ENV = 'development'
    VUE_APP_HTTPURL = http://131.132.133.13:8080  （ 具体为使用的地址 ）

2、为不同人开发的接口前加上不同的标识符：如

    原为:  '/project/temp/page'  改为  '/llz/project/temp/page’
    原为:  '/company/list/select'  改为  '/cts/company/list/select'
　　新增接口标识符  /llz  及  /cts

3、在 vue.config.js 文件下配置

const path = require('path');
function resolve (dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    publicPath: '/',
    devServer: {
    proxy: {
            '/llz': { 
                target: process.env.VUE_APP_HTTPURL, 
                changeOrigin: true,
                pathRewrite: {
                    '^/llz': '/pm'
                }
            },
            '/cts': {
                target: 'http://112.12.12.12:8080', （ 具体为使用的地址 ）
                changeOrigin: true,
                pathRewrite: {
                    '^/cts': '/pm'
                }
            }
        }
    },
    css: {
        // extract: true,
        sourceMap: false,
        loaderOptions: {}
    },
    chainWebpack: (config) => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('styles', resolve('src/assets/styles'))
            .set('img', resolve('src/assets/img'))
    }
}

4、当所有接口合并到同一服务器时，将如上删除，换为如下（）

proxy: [{
        context: ['/llz', '/cts'],
        target: process.env.VUE_APP_HTTPURL, 
        changeOrigin: true,
        pathRewrite: {
            '^/llz': '/pm',
            '^/cts':'/pm',
        }
    }],

5、问题  （希望得到大师指点，电脑webpack为3.5.3， vue项目的不清楚）

启动时有问题未解决，不知怎么处理，报错如下：

E:	kproj_teamcdm-project-manage>npm run serve

> cdm-project-management@0.1.0 serve E:	kproj_teamcdm-project-manage
> vue-cli-service serve --open

 INFO  Starting development server...
When specified, "proxy" in package.json must be a string or an object.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it an object.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! cdm-project-management@0.1.0 serve: `vue-cli-service serve --open`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the cdm-project-management@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:UserspengAppDataRoaming
pm-cache\_logs2019-12-04T03_01_52_654Z-debug.log

vue项目开发期间，配置webpack解决后台接口在不同服务器上的问题

相关推荐