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:\tk\proj_team\cdm-project-manage>npm run serve > cdm-project-management@0.1.0 serve E:\tk\proj_team\cdm-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:\Users\peng\AppData\Roaming\npm-cache\_logs\2019-12-04T03_01_52_654Z-debug.log