211、webpack-dev-server的安裝與配置
阿新 • • 發佈:2022-03-17
node有自己的伺服器,apache有自己的伺服器,webpack也有自己的伺服器,以後就在這裡面去開發。
1、安裝webpack-dev-server:
npm install --save-dev webpack-dev-server
2、執行
npx webpack-dev-server (一般不用npx來執行)
3、在package.json配置
"scripts":{
"dev":"webpack-dev-server"
}
執行:npm run dev
4、在webpack.config.js配置
執行:npm run dev
devServer: {//開啟伺服器配置static: { directory: path.join(__dirname, 'dist'), }, port:8080,//埠 compress:true,//開啟gzip壓縮 client: { progress: true,//在瀏覽器中以百分比顯示編譯進度。 }, host:"localhost",//ip地址:localhost本地,0.0.0.0可以訪問網路地址(真機測試用) open:true,//自動開啟瀏覽器 },
5、配置代理解決跨域問題
devServer: {//開啟伺服器配置 proxy:{//跨域 '/api':{ //自己起的別名api target:'http://vueshop.glbuys.com/api/', changeOrigin:true,//是否是跨域 pathRewrite:{ '^/api:':''//需要rewrite的 } } } },
【程式碼演示】