webpack-dev-server

前后端分离项目需要解决第一个问题就是，前端本地开发时如何解决通过ajax请求产生的跨域的问题。一般的做法是通过本地配置nginx反向代理进行处理的，除此之外，还可以通过nodejs来进行代理接口。当然，要实现这个前提是，前端开发环境必须运行在nodejs服务中，所幸的是，现在前端的开发自动化工具都是建立在nodejs上的，所以这个前提也不是很重要。 webpack-dev-server配置跨域方案 如果你项目是用webpack作为前端自动化构建工具的话，那么可以引用webpack-dev-server来进行配置跨域方案。webpack-dev-server是一个小型的nodejs服务器，是基于express框架的，用于实时监听和打包编译静态资源。其中里面有一个属性是proxy，是专门来配置代理请求接口的。 举个例子： 比如我现在通过webpack构建了一个本地开发环境，端口号是9000，现在我要在本地去请求(GET) http://jsonplaceholder.typicode.com/users 地址获取数据，如果前端没有设置代理的话，请求会因为跨域请求失败。这时候通过如下配置，就可以正常请求了。 devServer: { contentBase: __dirname + "/", port: 9000, proxy: { "/users": { //需要代理的路径

我们平时构建Vue项目，经常是用Vue官方提供的Vue-Cli脚手架，搭建起来非常方便。而Cli是基于webpack的工具，这里我要直接用webpack来搭建一个vue项目。 前提 请确保安装了 Node.js 的最新版本,Node-v查看版本号 开始构建项目 创建项目目录(myVuecli) 生成package.json npm init 在项目中安装webpack npm install --save-dev webpack （如果你使用 webpack 4+ 版本）在项目中安装 webpack-cli npm install --save-dev webpack 创建 src 目录（存放打包前源文件） src 中创建 index.html src 中创建 main.js（主入口文件） src 中创建 components (components 存放 vue 组件) src中创建App.vue文件 在根路径中创建 webpack.config.js 6.安装依赖 npm install --save vue npm install --save vue-router npm install --save-dev webpack-dev-server npm install --save-dev babel-core babel-loader@7.1.5 babel