vue?devserver如何配置

這篇文章主要介紹“vue devserver如何配置”，在日常操作中，相信很多人在vue devserver如何配置問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue devserver如何配置”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

一、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如何配置”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！