基於Vue專案打包上線配置

// 開發階段 => 注釋掉 => 讓 後面的log 可以使用

// 發布階段 => 釋放注釋 => log重寫 => 後面的log 都不會 列印

npm i live-server -g

為什麼要進行懶載入 ?

效能優化 - 首屏載入速度

//router/index.js

import home from
'../pages/home.vue'
// home就是首屏 不需要參與懶載入
const
login=(
)=>
import
(/* webpackchunkname: "user" */
'../pages/login.vue'
)const
register=(
)=>
import
(/* webpackchunkname: "user" */
'../pages/register.vue'
)const
user=(
)=>
import
(/* webpackchunkname: "user" */
'../pages/user.vue'
)const
edit=(
)=>
import
(/* webpackchunkname: "user" */
'../pages/edit.vue'
)const
myfollow=(
)=>
import
(/* webpackchunkname: "user" */
'../pages/myfollow.vue'
)const
mycomments=(
)=>
import
(/* webpackchunkname: "user" */
'../pages/mycomments.vue'
)const
mystar=(
)=>
import
(/* webpackchunkname: "user" */
'../pages/mystar.vue'
)const
test=(
)=>
import
(/* webpackchunkname: "home" */
'../pages/test.vue'
)const
detail=(
)=>
import
(/* webpackchunkname: "home" */
'../pages/detail.vue'
)const
tabedit=(
)=>
import
(/* webpackchunkname: "home" */
'../pages/tabedit.vue'
)const
search=(
)=>
import
(/* webpackchunkname: "home" */
'../pages/search.vue'
)

有時候我們想把某個路由下的所有元件都打包在同個非同步塊 (chunk) 中。只需要使用 命名 chunk，乙個特殊的注釋語法來提供 chunk name (需要 webpack > 2.4)。

//router/index.js

import home from
'../pages/home.vue'
// home就是首屏 不需要參與懶載入
const
login=(
)=>
import
(/* webpackchunkname: "user" */
'../pages/login.vue'
)const
register=(
)=>
import
(/* webpackchunkname: "user" */
'../pages/register.vue'
)const
user=(
)=>
import
(/* webpackchunkname: "user" */
'../pages/user.vue'
)const
edit=(
)=>
import
(/* webpackchunkname: "user" */
'../pages/edit.vue'
)const
myfollow=(
)=>
import
(/* webpackchunkname: "user" */
'../pages/myfollow.vue'
)const
mycomments=(
)=>
import
(/* webpackchunkname: "user" */
'../pages/mycomments.vue'
)const
mystar=(
)=>
import
(/* webpackchunkname: "user" */
'../pages/mystar.vue'
)const
test=(
)=>
import
(/* webpackchunkname: "home" */
'../pages/test.vue'
)const
detail=(
)=>
import
(/* webpackchunkname: "home" */
'../pages/detail.vue'
)const
tabedit=(
)=>
import
(/* webpackchunkname: "home" */
'../pages/tabedit.vue'
)const
search=(
)=>
import
(/* webpackchunkname: "home" */
'../pages/search.vue'
)

vue專案的打包上線

開啟專案目錄，執行 npm run build 專案執行後，會生成乙個dist目錄，這個目錄就是上線的內容，將這個檔案給後台，放到伺服器上即可 1.後台的根目錄下直接放即可 2.如果放在後台的乙個資料夾下，例如放在後台的project檔案下，配置如下 config index.js檔案裡面找到bui...

webpack vue 專案打包上線

去除console.log命令 生成打包報告 修改打包入口 如果要修改webpack 的相關命令，那麼我們需要新建乙個檔案 vue.config.js 然後首先匯出配置物件，在匯出的配置物件裡面寫東西哦 然後在configurewebpack 或者 chainwebpack 來修改webpack配置...

vue專案筆記（31） 專案打包上線

1 在專案終端中執行以下命令 npm run build2 此後，專案會增加dist資料夾，該目錄 就是最終要上線的 3 複製dist資料夾，交於後台開發人員，將 放到後端的伺服器上。4 放置在後端的根目錄下，也可以放置在指定的目錄下。如果要放置在指定的目錄下，我們需要在前端的config inde...