vue-cli webpack-dev-server

用vue-cli启用脚手架，可以快速生成项目文件，运行npm run dev 可以开启本地服务。dev是利用webpack-dev-sevice启动本地localhost:8080服务。如果这时候我们想要调用后台api接口会产生跨域，在localhost:8080服务下无法调取接口。解决方法如下：

脚手架有一个webpack.config.js文件，可以配置webpack-dev-sevice。

代理服务器发送请求

webpack.config.js

 devServer: {
 
    proxy: [{
      context: ['/collection', '/api'],//主路径
      target: 'http://xxx.com,//后台接口域名
      changeOrigin:true,//此项必选
    }]
  }

例如：
当我们访问 /collection/xxx 的时候，webpack-dev-sevice。就会去http://xxx.com/collection/xxx接口调用数据

官方网站api

/index.html 改变’/’ 访问路径

用npm run dev 的时候webpack-dev-sevice启动服务 浏览器访问localhost:8080/的时候会返回 /index.html 文件，如果我们想返回其他html文件该怎么配置呢？
首先我们要加载webpack插件’html-webpack-plugin’

 npm i --save-dev html-webpack-plugin

在webpack.config.js 头部引入

const HtmlWebpackPlugin = require('html-webpack-plugin');

配置如下：

webpack.config.js

plugins[ new HtmlWebpackPlugin({
      filename: 'dist/landing.html'
    })]

配置404页面

webpack.config.js

 devServer: {
  historyApiFallback: {
      rewrites: [
        { from: /^\/$/, to: '/dist/landing.html' },//返回根目录/dist/landing.html文件

        { from: /^\/subpage/, to: '/views/subpage.html' },
        { from: /./, to: '/dist/landing.html' }
      ]
    }
  }

chromedriver报错

npm init weback my-project 安装时在安装chromedriver卡住，当打开chromedriver时发现打不开，所以有可能是墙的问题，网络上找到的方法亲测可用

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver