1. 程式人生 > >最新vue-cli 2.9.1的webpack存在問題

最新vue-cli 2.9.1的webpack存在問題

最近vue-cli更新,用其構建專案的時候,發現bulid檔案下少了兩個檔案,分別是dev-sever.js和dev-client.js
vue-cli 2.8

vue-cli 2.9.1

這是為什麼呢
我們檢視下package.json
vue-cli 2.8

vue-cli 2.9.1

由此可知 在最新版本的vue-cli中webpack版本更新到v3.6.0了。

既然更新了 那就我們就重新開下webpack的配置項。

vue自啟瀏覽器設定

當我們啟動npm run dev執行此cli的時候發現 居然不會自己啟動瀏覽器了

這樣的話 豈不是裝逼不了? 不不不 還是可以的,只要我們修改下配置項就可以了

我們先看看 我們npm run dev 到底執行了什麼
繼續檢視package.json的scripts選項的dev 配置

vue-cli 2.9.1 package.json

對比下就知道 當我們執行npm run dev 實際上是執行了webpack-dev-server –inline –progress –config build/webpack.dev.conf.js
vue-cli 2.8 package.json

跟之前執行npm run dev 有區別 也好說明了他要刪除這兩個檔案的原因了,因為最新版本的webpack的配置中是採用webpack-dev-server這個外掛進行的啟動瀏覽器的 可以在官網進行檢視他的一個

API使用說明

build/webpack.dev.conf.js 執行路徑 那檢視下其配置

vue-cli 2.9.1 build/webpack.dev.conf.js

檢視API就知道這個open 這個引數就是開啟自啟伺服器的原因,但是config.dev.autoOpenBrowser這個是什麼呢,我們可以向上查詢

剛好對應config的定義 require就是載入進來 那就是繼續檢視對應的路徑 剛好對應config檔案下的index.js 在require預設是其下的index檔案 這裡就對應index.js

config/index.js

這裡的autoOpenBrowser對應false ,既然我們要改動那就直接改為true就可以。然後在重啟下服務 就可以自啟動服務了

其中的port也可以改對應的啟動埠,在最新版本的vue-cli配置中 即使設定的埠被佔用了,他自動會在其埠在加1 開啟服務的。

餓了嗎APP 介面設定問題

由於bulid資料夾下的兩個檔案沒有,那餓了嗎介面怎麼設定呢。

在此之前我們理解下餓了嗎app的介面的設定原理,由於資料都是直接從data.json這個檔案獲取的,所以呢,我們要模擬mock做個介面。但是在餓了嗎APP的設定中 它是直接啟動服務的時候把介面給做好了,這也是為什麼我們可以直接訪問其/api/seller有對應資料
vue-cli 2.9.1

在vue-cli 2.9.1之前版本是在dev-server.js直接設定的 具體引數在
vue-cli 2.9.1

方法一:

回到起點,在最新版本vue-cli的配置中瀏覽器服務都在webpack-dev-server 這個外掛中,那我們就其在webpack.dev.conf.js進行修改
現在我們的要求就是怎麼在服務開啟的時候介面資料也對應做好呢,那我們檢視其外掛API 剛好有一個引數就是devServer.before
devServer.before

就是解決問題所在了。 進行修改
webpack.dev.conf.js

這樣我們就可以直接傳送API請求資料了

this.axios.get("/api/seller").then(function(res){
  // do something
})

方法二

會node的也可以直接做個api介面,開啟node服務 然後餓了嗎專案直接訪問這個介面,當然這裡會存在跨域問題和路由對映,不過webpack-dev-server 幫你們解決這個問題了 主要是設定引數問題 devServer.proxy 進行路由對映等等

不過這些還需要考慮到自身能力,我建議還是使用第一種方法

總結

前端技術更新那麼快,我們最好就是每天都要學習想對應的知識,主要是底層能理解透徹了 這些問題我們就可以對應解決

雖然我的能力有限,目前能解決的也就這些問題,畢竟是第一次發表文章,如果存在什麼技術問題可以直接回復我,謝謝了。

相關推薦

最新vue-cli 2.9.1的webpack存在問題

最近vue-cli更新,用其構建專案的時候,發現bulid檔案下少了兩個檔案,分別是dev-sever.js和dev-client.js vue-cli 2.8 vue-cli 2.9.1 這是為什麼呢 我們檢視下package.

最新vue-cli 2.9.1和2.8.x版本的區別

最近vue-cli更新,用其構建專案的時候,發現bulid檔案下少了兩個檔案,分別是dev-sever.js和dev-client.js vue-c

vue-------------2.9.6 vue cli---------2.9.6

"axios": "^0.18.0", "element-ui": "^2.4.9", "less": "^3.8.1", "lib-flexible": "^0.3.2", "mint-ui": "^2.2.13", "px2rem-loader": "^0.1.9", "vue": "^2.5.

解決安裝vue-cli報錯 出現-4058的問題(vue 版本2.9.6)

解決安裝vue-cli報錯 出現-4058的問題(vue版本 2.9.6) 解決步驟: 1.通過config命令 npm config set registry https://registry.npm.taobao.org npm inf

vue-cli 2.92版本 後臺數據獲取server

eva egl dcl crs 連接 添加 lsb 博客 vue 一、引包 const axios = require(‘axios‘); const express = require(‘express‘); const apiRoutes = express.Rou

vue-cli#2.0 webpack 配置分析

尋找 see pac 目錄結構 display stop 發布 after targe 前言 作為 Vue 的使用者我們對於 vue-cli 都很熟悉,但是對它的 webpack 配置我們可能關註甚少,今天我們為大家帶來 vue-cli#2.0 的 webpack 配置分

vue-cli#2.0專案結構分析

專案結構 build 構建工具相關的目錄 config 配置目錄 dist 通過工具打包生成的最終需要上線的目錄 node_modules 存放本地開發所有的依賴包的目錄 src 原始碼目錄 static 存放圖片等靜態資源的目錄 .babelrc babel是把新的ES語法,編譯

20181204——vue-cli#2.0 webpack 配置分析

前言 作為 Vue 的使用者我們對於 vue-cli 都很熟悉,但是對它的 webpack 配置我們可能關注甚少,今天我們為大家帶來 vue-cli#2.0 的 webpack 配置分析 vue-cli 的簡介、安裝我們不在這裡贅述,對它還不熟悉的同學可以直接訪問 vue-cli 檢視

vue-cli 2.* 中匯入公共less檔案

在新版的Vue CLI 3中,如何匯入公共less檔案在文件裡已經描述的很清楚了,但是在2.*的版本中,我沒有查到相關的辦法,網友的辦法又相當複雜,於是我推薦給大家一個很簡單的辦法。 首先,會用到webpack中的資源前處理器Style Resources Loader,所以需要: npm i styl

Vue CLI 3(一)——從解除安裝Vue CLI 2開始搭建新VUE專案並同時使用Vue CLI 2

Vue CLI 3問世後,因為公司專案緊張,一直沒有機會學習。在專案上線後,本人終於抽出時間來自學一下。下面記錄本人從解除安裝Vue CLI 2更新Vue CLI 3開始,一步步搭建VUE專案,並同時能用Vue CLI 2 啟動Vue CLI 2搭建的專案。 注:本人電腦MAC。 一、解除安

vue-cli 2.x和3.x安裝的區別

1.全域性安裝vue的腳手架:vue-cli(指定版本後面加@2.x.x) npm install -g vue-cli npm install -g @vue/cli 2.使用初始化 vue 專案: vue init webpack <project-name> vue create

Vue CLI 2&3 下的專案優化實踐 —— CDN + Gzip + Prerender

前言 這些優化方案適用於 Vue CLI 2 和 Vue CLI 3 ,文章主要基於Vue CLI 2進行介紹,關於如何在Vue CLI 3中進行相關的webpack調整,我已經放在了 vue-cli3-optimization 這個倉庫下,並配有詳細的註釋,

淺談vue-cli 3 和 vue-cli 2的區別!!!

Vue-cli3.0於8.11日正式釋出,看了下評論,不是特別的樂觀,說說我個人的意見,我是Vue的忠實粉,so.... 大概三個月前超哥就已經得知3.0的訊息,試著用了下,相比之下現在的3.0和測試時的區別: modern mode。啟用該模式會自動構建兩個版本的

記在vue-cli 2.0中使用typescript,從webpack ^3.0到^4.0的自殺式升級。

       最近抽了點時間弄了一下vue的服務端渲染(SSR)以及serviceWork和application的離線快取技術(PWA),於是就拿了以前的老專案去重寫了,但是老的有點落伍了是基於vue-cli 2.0的,完全就是在webpack的基礎上加

一次vue-cli 2.x專案打包優化經歷(優化xlsx外掛)

if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin webpackConfig.plugins.

vue-cli版本更新(2.9.1)問題記錄

cnblogs ejs log 網上 row 不能 9.1 topic png 重新安裝了nodejs以後,我也重新下載安裝了vue-cli準備寫一個新的練手項目。當我修改好默認端口後,啟動server服務,發現默認瀏覽器不能自動打開頁面;控制臺打印也變成這樣了;‘npm

vue-cli版本更新(2.9.1)問題記錄-2

cli index -h 節奏 顯示 localhost 查找 ios1 訪問 今天想把做好的頁面放在手機端瀏覽,發現新版的vue-cli無論在PC還是手機都只能用localhost訪問(127.0.0.1除外).....(這樣還怎麽讓我用手機吃雞了!TT),於是我在網上查

vue-cli工具2.9以上版本的使用

新版vue-cli使用基礎 第一步安裝 安裝和原來的一樣,執行命令,全域性安裝 npm install vue-cli -g 新建專案 vue init webpack Vue

vue-cli腳手架npm相關文件說明-2、webpack.prod.conf.js

base upd esp dev 如何 resolve 壓縮 ont 緩存 下面介紹webpack.prod.conf.js中相關配置代碼和配置的說明,建議先查閱build/webpack.prod.conf.js /* * Webpack 生產環境配置文件,用於生

使用vue-cli腳手架搭建項目,保編譯時出現的代碼檢查錯誤(ESLint)

rip 正則 fin 外部 內置 global 同名 esp 復雜 一、問題 出現這麽寫錯誤是什麽原因呢?相信很多小白都會像我一樣,第一次接觸時有點二丈和尚摸不著頭腦。其實是在你用vue-cli腳手架構建項目時用了ESLint代碼檢查工具,如下圖 那麽什麽是ESL