打包上線

• 開發階段 : npm run serve
• 發布階段 : npm run build

build之前

1. 把基準地址, 由開發階段的換成發布階段的

//main.js
axios.defaults.baseURL = 'http://localhost:3000'

2. 忽略項目中打印的結果

// main.js
console.log = () => {}// 開發階段 => 注釋掉  => 讓 后面的log 可以使用
// 發布階段 => 釋放注釋 => log重寫 => 后面的log 都不會 打印

build

• 運行 npm run build
• 打一個包出來 : /dist文件夾
• 把 /dist文件夾交給后臺即可
  • 我們可以自己嘗試 : live-server

npm i live-server -g

懶加載

為什么要進行懶加載 ?

性能優化 - 首屏加載速度

1. 把 除了首屏的組件外 其他組件都處理為異步組件, 交給webpack來進行分割 , 需要的時候才加載該模塊

//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')

##2. 把組件按組分塊

有時候我們想把某個路由下的所有組件都打包在同個異步塊 (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')