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。..
用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接口调用数据
/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
更多推荐
所有评论(0)