vue devserver及其設定方法

2022-12-21 14:00:14

一、devserver背景

每次改程式碼都需要重新部署,
或者只改變修改程式碼行的效果
所以出現了devserver本地服務
為了完成自動編譯，webpack提供了幾種可選的模式
方式一：webpack watch mode

實現方法一：在匯出的設定中，新增watch:true
實現方法二：在啟動webpack的命令中，新增–watch的標識

方式二：webpack-dev-server(常用)

二、webpack-dev-server

上面的方式可以監聽到檔案的變化，但是事實上它本身沒有自動重新整理瀏覽器的功能的，
當然我們可以通過vscode使用live-server來完成這樣的功能，但是我們希望不使用live-server的情況下，可以具備實時重新載入的功能
步驟：
1、安裝npm install webpack-dev-server -D
2、增加命令"serve":“webpack serve”
3、npm run serve即可

用這個啟動專案有個特點：
不會輸出build資料夾
因為localhost8080—express(src等靜態檔案)
打包時直接將src等檔案編譯後放到記憶體裡，然後直接使用express框架發起服務
如果先編譯，放到外存裡，然後將其上傳到記憶體，然後使用express框架發起服務。那樣會降低效率

三、對devserver進行一些設定：

在webpack.config.js中，寫上

devServer:{
  contantBase:"./abc"
}

如果index.html裡<script. src=“./aaa.js”>，打包時會去找abc/aaa.js,這就是contantBase的作用，可以理解為去原始碼裡找檔案，一般值是"./public"
因為webpack.config.js中設定了webcopyPlugin,如果沒有設定，那麼就不會
拷貝圖片等靜態檔案，這時候就需要去public資料夾中尋找。

一般開發階段使用contantBase
一般打包階段(上傳伺服器)使用copyplugin

四、模組熱替換HMR

應用程式在執行過程中，替換，新增，刪除模組都會重新重新整理整個頁面，拿計數器案例為例：
加到199了，js程式碼新增了console.log(“aaa”)
導致199變成了0

target:"web"
 devserver:{
  contantBase:"./abc",
  hot:true，//熱更新
 open:true,//build自動開啟瀏覽器
 host://預設lolaohost，也可0.0.0.0，這樣同一網段的主機都能通過ip存取
 port:7777//存取專案時的埠號
 compress:true瀏覽器請求靜態資源時壓縮一下，開啟瀏覽器的檢查時可以看到bundle.js的content-encoding是gzip，瀏覽器自動解壓
}

main.js中，import "./js/element":改為
import "./js/element":
if(module.hot){
  module.hot.accept("./js/element.js",()=>{
    console.log("模組發生更新了")
   }
}

.vue檔案中修改message也會觸發模組熱替換的
修改了這個設定需要重新npm run serve

五、跨域存取問題：

localhost7777的專案程式碼中axios了localhost8000的資料moment，就會出現跨域存取報錯，(瀏覽器不允許跨域)
解決辦法

devserver:{
contantBase:「./abc」,
hot:true，
open:true,
host:
port:7777
proxy:{
「/api」:「http://localhost:8888」
}
}

然後在axious時，改成axious(“/api/moment”)
這樣仍會報錯，因為axious解析時會把/api/moment解析成http://localhost:8888/api/moment,所以會報錯404
解決辦法：

proxy:{
「/api」:{
target:「http://localhost:8888」,
pathRewrite:{
「^/api」:「」
},
secure:false,//若target是https，並且secure是true,就會停止存取
changeOrigin:true,//當前專案是localhost7777,代理是localhsot8888,在真實請求伺服器時，伺服器會檢查源頭在哪，如果不加changeOrigin,那麼伺服器會看到header裡localhost:7777/api/moment,而不是8888
}

六、webpack的resolve：

import時後邊的括號可以寫：

相對路徑
絕對路徑
node_module

下邊介紹node_module：
webpack.config.js裡有一個（如果沒有，那就是全取得預設值）

resolve:{
modules : [「node_modules」]//預設從這裡找，所以資料夾不能改名字
extension:[「.js」,「.vue」]
alias:{
「js」:path.resolve(__dirname,「./src/js」),
「@」:path.resolve(__dirname,「./src」),
這樣設定上後main.js中的import不用寫./開頭了
}
}

如何判斷是檔案還是資料夾呢
如果沒有字尾，那麼匹配js/json/jms去找檔案，如果有那就是檔案，如果沒有那就是資料夾，如果是個資料夾，看看裡邊有沒有index的檔案

七、區分開發環境和生產環境

package.json中指令裡
build值改為“webpack --config ./config/webpack.prod.config.js”
serve值改為“webpack serve --config ./config/webpack.dev.config.js“

npm install webpack-merge

新建資料夾config
新建檔案webpack.prod.config.js

const {cleanWebpackPlugin}=require("clean-webpack-plugin")
const copyWebpackPlugin = require("copy-webpack-plugin")
const {merge} =require("webpack-merge")
const commonConfig= require("./config/webpack.common.config.js")

module.exports=merge(commonConfig,{
   mode:"production",
   plugins: [
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
    patterns: [
      {
         from: ' "public" ,
         to: "./",
        glob0ptions: {
           ignore: [
              "**/ index . html"
           ]}
       }
    ]
  }))
]

新建檔案webpack.dev.config.js

module.exports={
    mode:"development",
    devtool:"source-map",
    devserver:{
      contantBase:"./abc",
      hot:true，
      open:true,
       host:
       port:7777
       proxy:{
         "/api":"http://localhost:8888"
      }
   }
}

新建檔案webpack.common.js

module.exports={
   公共的一些設定留在這個檔案裡
}

到此這篇關於vue devserver及其設定的文章就介紹到這了,更多相關vue devserver設定內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！