1. 程式人生 > 程式設計 >詳解Vue專案的打包方式(生成dist檔案)

詳解Vue專案的打包方式(生成dist檔案)

目錄
  • 一、相關配置
    • 情況一(使用的工具是 -cil)
    • 情況二(使用的工具是 webpack)
  • 二、打包

    一、相關配置

    情況一(使用的工具是 vue-cil)

    JrWEzwKlM如果是用 vue-cli 建立的專案,則專案目錄中沒有 conJrWEzwKlMfig 資料夾,所以我們需要自建一個配置檔案;在根目錄 src 下建立檔案 vue.config.,需注意檔名稱必須是 vue.config.js,然後在檔案中插入以下程式碼:

    //打包配置檔案
    module.exports = {
      assetsDir: 'static',parallel: false,publicPath: './',};

    結構如下:

    詳解Vue專案的打包方式(生成dist檔案)

    情況二(使用的工具是 webpack)

    如果使用的是 webpack,則直接在 config 中 index.js 檔案下修改 webpack 配置:

    assetsPublicPath: './'

    結構如下:

    詳解Vue專案的打包方式(生成dist檔案)

    二、打包

    配置完成之後,調起控制http://www.cppcns.com臺,輸入打包命令 npm run build 開始打包;

    詳解Vue專案的打包方式(生成dist檔案)

    &nbhttp://www.cppcns.comsp;成功後會有如下提示;

    詳解Vue專案的打包方式(生成dist檔案)

    且會在專案目錄自動生成 dist 資料夾;

    詳解Vue專案的打包方式(生成dist檔案)

    dist 資料夾就是我們需要的包,隨後放至伺服器部署上線即可;需要注意打包之後無論在專案中做了何種修改,都需要npm run build

    重新打包。

    到此這篇關於詳解Vue專案的打包方式(生成dist檔案)的文章就介紹到這了,更多相關Vue專案打包 內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!