Vue CLI 3中提供了history模式的打包方式。在使用Vue Router進行開發時，我們默認使用的是hash模式。但是，為了更好的用戶體驗，我們希望能夠使用history模式，以便更加自然的呈現URL。在Vue CLI 3中，這個過程也變得非常簡單。下面我們就來詳細了解一下Vue CLI 3中如何進行history模式的打包。

首先，我們需要在Vue Router中進行配置。我們需要在Vue Router的構造函數中，將mode配置為"history"。如下代碼：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})

這樣我們就配置好了Vue Router，現在需要配置webpack。

在webpack中，我們添加historyApiFallback選項來避免404錯誤，這個選項會為任何沒有對應資源的url提供一個目標資源。我們還需要配置publicPath，這是在我們的靜態資源上下文中的根URL。具體如下：

module.exports = {
......
devServer: {
historyApiFallback: true,
},
output: {
publicPath: '/'
}
};

在上面的代碼中，我們在webpack的devServer配置對象中添加了historyApiFallback選項。這樣任何沒有被webpack處理的URL都會返回index.html文件，這樣Vue Router就可以接管路由和狀態的管理了。publicPath設置為 "/"，表示我們在根目錄中部署我們的網站。

最后，我們只需要執行命令 npm run build，打包完成后在./dist目錄下找到生成的index.html和相關代碼文件就可以使用history模式了。