用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
Logo

前往低代码交流专区

更多推荐