基于Vue项目打包上线配置

打包上线

• 开发阶段 : 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')