方式1:通过代理来解决
一部分代码(vue 2.x)
/api/cms:表示url以这个开头的(/api/cms/xx/xx)请求转发到http://localhost:31001/api/cms/xx/xx(有node.js代理服务器请求),pathRewrite:表示将/api替换指定的字符串,请求转发的url变成了 http://localhost:31001/cms/xx/xx;
配置:在 /config/index.js。里面有一个proxyTable,往里面添加相应的东西,注意访问的地址还是本地的,node.js帮我们转发了,我们自己是看不到的;
module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', //proxyTable: proxyConfig.proxyList, proxyTable: { '/banner': { //target: 'http://localhost:3000/mock/11' target: 'http://127.0.0.1:7777' }, '/api/cms': { target: 'http://localhost:31001', pathRewrite: { '^/api': '' } //target: 'http://127.0.0.1:50201' } /*, '/ucenter': { // target: 'http://localhost:3000/mock/11' //target: 'http://127.0.0.1:31200' target: 'http://127.0.0.1:50201' }, '/auth': { // target: 'http://localhost:3000/mock/11' //target: 'http://127.0.0.1:31200' target: 'http://127.0.0.1:50201/api' }, '/course': { // target: 'http://localhost:3000/mock/11' //target: 'http://127.0.0.1:31200' target: 'http://127.0.0.1:50201/api' }, '/media': {//媒资管理 //target: 'http://127.0.0.1:31400' target: 'http://127.0.0.1:50201' }, '/cms/!*': {//cms管理 //target: 'http://127.0.0.1:31001' target: 'http://127.0.0.1:50201' }, '/filesystem/!*': {//文件系统管理 //target: 'http://127.0.0.1:22100' target: 'http://127.0.0.1:50201' }, '/category/!*': {//分类管理 // target: 'http://127.0.0.1:3000/mock/11' //target: 'http://127.0.0.1:31200' target: 'http://127.0.0.1:50201' }, '/sys/!*': {//系统管理 //target: 'http://127.0.0.1:31001' target: 'http://127.0.0.1:50201' },*/ /*'/static/!*': {//系统管理 //target: 'http://127.0.0.1:31001' target: 'http://127.0.0.1' }, '/group1/*': {//系统管理 // target: 'http://127.0.0.1:3000/mock/11' target: 'http://192.168.101.64' }*/ }, // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 11000, // 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: '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, // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false, } }