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）项目部署