技術標籤：vue.jswebpack

Vue.js

使用npm安裝全域性安裝vue-cil npm install -g vue-cli，結束後使用vue --version測試安裝是否成功

新建專案

在一個資料夾中啟動cmd（在檔案路徑輸入cmd就行，回車就進入當前資料夾的cmd路徑控制檯），輸入

vue create test-project                 建立名為test-project的專案

這樣建立的專案是不包含部分webpack版本的，config配置檔案要自己新增，或者使用以下建立專案

vue init webpack [project_name] 建立一個基於webpack的vue專案
 

執行結束後，使用cd指令跳轉到專案位置，使用npm run dev或者npm run serve啟動專案，具體執行名稱與package.json中的

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

有關（如上，除錯使用名稱為serve）
執行專案，結果將生成一條本地的訪問連結，在瀏覽器開啟就可以看到效果( http://localhost:8080/)

WebPack專案打包

打包vue專案，執行npm run build，工具將自動打包專案檔案，打包是為了將前端網頁所需要的資源集合在一個資料夾中（包括設計時的各種js/imag…資源），生成後將儲存在dist資料夾中，可以在任何後端框架部署該前端網頁，用於顯示效果。
需要注意的是，如果專案一開始不是基於webpack構建的，則要在專案的package.json同級目錄中新增新增一個vue.config.js檔案，按照文件的提示，只要在該檔案中新增

module.exports = {
    publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
}
 

該值在官網裡的提示是

publicPath
Type: string
Default: ‘/’
部署應用包時的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到這個值，所以請始終使用 publicPath 而不要直接修改 webpack 的 output.publicPath。
預設情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 https://www.my-app.com/。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.my-app.com/my-app/，則設定 publicPath 為 /my-app/。
這個值也可以被設定為空字串 (’’) 或是相對路徑 (’./’)，這樣所有的資源都會被連結為相對路徑，這樣打出來的包可以被部署在任意路徑，也可以用在類似 Cordova hybrid 應用的檔案系統中。

由於該檔案是全域性的修改，還有很多可以自定義的部分就不贅述了，需要的話只要將對應引數和值新增在module.exports大括號內部就可以。

參考

vue.config.js

關於 Vue cli 3的配置 vue.config.js 和使用