Vue項目實戰：上線部署

剔除項目無用代碼

前端性能優化

配置服務器做域名解析

上傳項目 啓動服務

（1）路由按需加載方案

路由懶加載能把不同路由對應的組件分割成不同的代碼塊，然後當路由被訪問的時候才加載對應組件，這樣就更加高效了。

路由懶加載主要目的是防止 首屏加載內容過多，延時過長，造成白屏，不利於用戶體驗。

方式1：

在router.js中：

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component:Home,
            redirect: '/index',
            children: [
                {
                    path: '/index',
                    name: 'index',
                    component: Index,
                },
                {
                    path: '/product/:id',
                    name: 'product',
                    component: resolve => require(['./pages/index.vue'], resolve),
                },
                {
                    path: '/detail/:id',
                    name: 'detail',
                    component: resolve => require(['./pages/detail.vue'], resolve),
                }                
            ]
        },
        {
            path: '/login',
            name: 'login',
            component:resolve => require(['./pages/login.vue'], resolve),
        },
        {
            path: '/cart',
            name: 'cart',
            component:resolve => require(['./pages/cart.vue'], resolve),
        }
    ]
})

方式2：

使用動態 import語法來定義代碼分塊點。

• 安裝插件syntax-dynamic-import：

  npm i @babel/plugin-syntax-dynamic-import --save

• 在router.js中：

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
    routes: [
        {
            path: '/',
            name: 'home',
            component:Home,
            redirect: '/index',
            children: [
                {
                    path: '/index',
                    name: 'index',
                    component: Index,
                },
                {
                    path: '/product/:id',
                    name: 'product',
                    component: () => import('./pages/index.vue'),
                },
                {
                    path: '/detail/:id',
                    name: 'detail',
                    component: () => import('./pages/detail.vue'),
                }                
            ]
        },
        {
            path: '/login',
            name: 'login',
            component:() => import('./pages/login.vue'),
        },
        {
            path: '/cart',
            name: 'cart',
            component:() => import('./pages/cart.vue'), 
        }
    ]
})

（2）刪除預加載 - 真正按需

在vue.config.js中加入配置：

module.exports = {
    chainWebpack: (config) => {
        config.plugins.delete('prefetch');
    }
}

（3）服務器部署準備工作

• 購買域名並備案

• 購買服務器

• 域名解析

（4）服務器Nginx軟件安裝和配置

（5）Node環境搭建

（6）項目部署