vue项目开发期间，配置webpack解决后台接口在不同服务器上的问题 之 二 （ node搭建服务 ）
由于今天上午 后端人员把接口都整合都一个服务器了，所以就没有硬关注 上一篇文章的问题，
晚上回来，用node搭了一个简单服务器，测试了下，是没有问题的。代码如下：
一、 自己初始化项目，
1、package.json
{
"name": "es",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.2.0",
"csv-loader": "^3.0.2",
"express": "^4.17.1",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.0.1",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.9.0",
"webpack-merge": "^4.2.2",
"xml-loader": "^1.2.1"
},
"dependencies": {
"lodash": "^4.17.15"
}
}
2、webpack.common.js
const path = require('path');
// const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
proxy: {
'/yyy': {
target: "http://localhost:3000",
changeOrigin: true,
pathRewrite: {
'^/yyy': '/'
}
},
'/wpp': {
target: "http://localhost:4000",
changeOrigin: true,
pathRewrite: {
'^/wpp': '/'
}
},
}
},
plugins: [
// new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Production'
})
],
};
3、webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
});
4、index.html
<!doctype html>
<html>
<head>
<title>起步</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
5、src/index.js
function axios(api){
let xhr = new XMLHttpRequest();
xhr.open("get", api, true);
xhr.onload = () => {
console.log( xhr.response )
}
xhr.send()
}
axios('/wpp/api/user');
axios('/yyy/api/name');
二、启动node服务，启动接口
server.js
let express = require('express')
let app = express()
app.get('/api/name', (req, res) => {
res.json(
{ name: "yyy user" }
)
})
app.listen(3000)
server1.js
let express = require('express')
let app = express()
app.get('/api/user', (req, res) => {
res.json(
{ name: "wpp user" }
)
})
app.listen(4000)
三、启动服务
1、 node server.js
2、 node server1.js 或可以在webpack中配置
3、 npm run start ( 启动项目 )
之后，控制台中看到
{"name":"wpp user"}
{"name":"yyy user"}
以上为不同接口在不同服务器时，当合并到一个服务器时
如 server1.js 合并到 server.js
let express = require('express')
let app = express()
app.get('/api/name', (req, res) => {
res.json(
{ name: "yyy user" }
)
})
app.get('/api/user', (req, res) => {
res.json(
{ name: "wpp user" }
)
})
app.listen(3000)
webpack.common.js 可以改成这种配置
devServer: {
proxy: [{
context: ['/yyy', '/wpp'],
target: "http://localhost:3000",
pathRewrite: {
'^/yyy': '/',
'^/wpp': '/'
}
}]
// proxy: {
// '/yyy': {
// target: "http://localhost:3000",
// changeOrigin: true,
// pathRewrite: {
// '^/yyy': '/'
// }
// },
// '/wpp': {
// target: "http://localhost:4000",
// changeOrigin: true,
// pathRewrite: {
// '^/wpp': '/'
// }
// },
// }
},
1、 node server.js
2、 npm run start ( 启动项目 )
之后，控制台中看到
{"name":"wpp user"}
{"name":"yyy user"}
vue项目开发期间，配置webpack解决后台接口在不同服务器上的问题 之 二 （ node搭建服务 ）的更多相关文章
- vue项目开发，用webpack配置解决跨域问题
今天在本地开发时候碰到了跨域的问题,突然觉着跨域问题在所难免啊,之前没有没有碰到总觉着解决跨域很高大上的样纸,其实就是受限于网络的同源策略,跨域前后端都可以进行处理. 1,后端更改header hea ...
- vue项目构建：vue-cli+webpack常用配置
1,Webpack-dev-server的proxy用法:https://www.jianshu.com/p/f489e7764cb8 2,vue-cli3搭建项目之webpack配置:https:/ ...
- 前端 vue-cli+Webpack 项目开发环境配置、创建一个vue-demo
一.软件及命令: (1)下载node.js 最新的LTS 版本,下载 msi格式的(直接点击安装即可). (2)命令1:npm install cnpm -g 命令2:cnpm install web ...
- Vue项目开发最新、最全代码规范文档
Vue项目开发最新.最全代码规范文档 2019年02月21日 10:43:49 yw00yw 阅读数 337 一. 目录结构 |— build 构建脚本目录 |— build.js 生产环境构建( ...
- Vue项目开发流程(自用)
一.配置开发环境 1.1 安装Node.js npm集成在Node中,检查是否安装完成:node -v 1.2 安装cnpm(淘宝镜像) npm install -g cnpm,检查安装是否完成:cn ...
- Vue项目开发相关问题总结
Vue项目开发相关问题总结 一.创建一个项目(两种方式) 1.通过CLI命令行创建,具体步骤如下: (1)Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11 ...
- Vue 项目开发
目录 Vue 项目开发 项目目录结构解析 入口文件 main.js (项目入口) 根组件 app.vue index.html 文件入口 router 路由 components 子组件 项目初始化 ...
- VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...
- vue从mock数据过渡到使用后台接口
说明: 最近在搭建一个前端使用vue-element-admin,后端使用springBoot的项目. 由于vue-element-admin使用的是mock的模拟数据跑起来的项目,所以在开发过程中难 ...
随机推荐
- python3使用smtplib发送邮件，带xlsx附件
一.概述 最近在做一个统计报表,需要发送邮件,并带附件的. 在之前的文章中 https://www.cnblogs.com/xiao987334176/p/10022026.html 已经实现了发送邮 ...
- CRLF will be replaced by LF in XXX when git commit
转载自Git-warning: CRLF will be replaced by LF in XXX 今天,普通平凡的一天,平凡的使用 git add .,然后又出现一个之前没遇到的错误提示 . 真开 ...
- 移动开发首页业界资讯移动应用平台技术专题 输入您要搜索的内容 基于Java Socket的自定义协议，实现Android与服务器的长连接（二）
在阅读本文前需要对socket以及自定义协议有一个基本的了解,可以先查看上一篇文章<基于Java Socket的自定义协议,实现Android与服务器的长连接(一)>学习相关的基础知识点. ...
- pacman 命令详解
Pacman 是一个命令行工具,这意味着当你执行下面的命令时,必须在终端或控制台中进行. 1.更新系统 在 Arch Linux 中,使用一条命令即可对整个系统进行更新:pacman -Syu 如果你 ...
- python基础05--深浅copy, set,bytes
1.1 深浅 copy 1. = 赋值操作, lis1=[1,2,3] list2 = list1 list1.append(4) 则list1,list2都变 赋值都指向同一个地址,改变一个 ...
- Django---Django的ORM的一对多操作(外键操作),ORM的多对多操作(关系管理对象),ORM的分组聚合,ORM的F字段查询和Q字段条件查询,Django的事务操作,额外(Django的终端打印SQL语句,脚本调试)
Django---Django的ORM的一对多操作(外键操作),ORM的多对多操作(关系管理对象),ORM的分组聚合,ORM的F字段查询和Q字段条件查询,Django的事务操作,额外(Django的终 ...
- CSS3 2D 变换
CSS2D transform 表示2D变换,目前获得了各主流浏览器的支持,是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,可以取代大量之前只能靠Flash才 ...
- 025：为什么需要将Logger对象声明为private static final类型的
本文阅读时间大约4分钟. 参考答案 就这个问题而言,我总结了三个原因: 设置为private是为了防止其他类使用当前类的日志对象: 设置为static是为了让每个类中的日志对象只生成一份,日志对象是属 ...
- php mysql 按照指定年月查找数据 数据库create_time为时间戳
$moneyloglist = MoneyLog::where(['user_id' => $this->auth->id]) ->where($where) ->whe ...
- Redis中的LFU算法
在Redis中的LRU算法文中说到,LRU有一个缺陷,在如下情况下: ~~~~~A~~~~~A~~~~~A~~~~A~~~~~A~~~~~A~~| ~~B~~B~~B~~B~~B~~B~~B~~B~~ ...