VUE项目上线优化与发布学习记录

优化项目

1、生成项目报告：

vue-cli-service build --report

2、解决项目在打包后的console.log问题：
安装一个插件（babel-plugin-transform-remove-console）在项目build阶段移除所有的console信息。打开babel.config.js，编辑代码如下：

//项目发布阶段需要用到的babel插件
const productPlugins = []

//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){
  //发布阶段
  productPlugins.push("transform-remove-console")
}

module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ],
    ...productPlugins
  ]
}

3、修改打包入口

vue-cli 3.0生成的项目，隐藏了webpack配置项，如果我们需要配置webpack，需要通过vue.config.js来配置。需要的话在项目根目录中创建vue.config.js文件，

module.exports = {
    chainWebpack:config=>{
        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
        })
        //开发模式
        config.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

补充：
   chainWebpack可以通过链式编程的形式，修改webpack配置
   configureWebpack可以通过操作对象的形式，修改webpack配置

4、用外部CDN减少js文件体积
默认情况下，依赖项的所有第三方包都会被打包到chunk-vendors.js文件中，导致该js文件过大。我们可以通过externals排除一些包，使它们不被打包到chunk-vendors.js文件中。但是为了继续正常使用，还需要将这些包听过外部加载的方式引入

1、修改vue.config.js文件：
	module.exports = {
	    chainWebpack:config=>{
	        //发布模式
	        config.when(process.env.NODE_ENV === 'production',config=>{
	            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
	            //add添加新的打包入口
	            config.entry('app').clear().add('./src/main-prod.js')
	
	            //使用externals设置排除项
	            config.set('externals',{
	                vue:'Vue',
	                'vue-router':'VueRouter',
	                axios:'axios',
	                lodash:'_',
	                echarts:'echarts',
	                nprogress:'NProgress',
	                'vue-quill-editor':'VueQuillEditor'
	            })
	        })
	        //开发模式
	        config.when(process.env.NODE_ENV === 'development',config=>{
	            config.entry('app').clear().add('./src/main-dev.js')
	        })
	    }
	}

2、打开开发入口文件main.js,删除掉默认的引入代码。然后打开public/index.html添加外部cdn引入代码

    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
    
    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

5、首页根据打包模式定制title
我们可以通过插件的方式来定制首页title内容，打开vue.config.js，编写代码如下：

1、修改vue.config.js文件：

	module.exports = {
	    chainWebpack:config=>{
	        config.when(process.env.NODE_ENV === 'production',config=>{
	            ......
	            //使用插件
	            config.plugin('html').tap(args=>{
	                //添加参数isProd
	                args[0].isProd = true
	                return args
	            })
	        })
	        config.when(process.env.NODE_ENV === 'development',config=>{
	            config.entry('app').clear().add('./src/main-dev.js')
	
	            //使用插件
	            config.plugin('html').tap(args=>{
	                //添加参数isProd
	                args[0].isProd = false
	                return args
	            })
	        })
	    }
	}

2、打开public/index.html

   <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>学习系统</title>

6、路由懒加载
当路由被访问时才加载对应的路由文件，就是路由懒加载。实现步骤：

安装 @babel/plugin-syntax-dynamic-import
在babel.config.js中声明该插件
修改router.js 文件

1、修改babel.config.js文件
	
	//项目发布阶段需要用到的babel插件
	const productPlugins = []
	
	//判断是开发还是发布阶段
	if(process.env.NODE_ENV === 'production'){
	  //发布阶段
	  productPlugins.push("transform-remove-console")
	}
	
	module.exports = {
	  "presets": [
	    "@vue/app"
	  ],
	  "plugins": [
	    [
	      "component",
	      {
	        "libraryName": "element-ui",
	        "styleLibraryName": "theme-chalk"
	      }
	    ],
	    ...productPlugins,
	    //配置路由懒加载插件
	    "@babel/plugin-syntax-dynamic-import"
	  ]
	}

2、修改router.js文件

    // import Login from './components/Login.vue'
	const Login = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Login.vue')

上线发布

1、通过node创建服务器
在项目同级创建一个文件夹server文件夹存放node服务器，使用终端打开项目后 npm init -y，初始化包之后，输入命令 npm i express -S。将打包后的dist文件夹，放到server文件夹中。在server文件夹中创建app.js文件。然后运行node app.js


const express = require('express')

const app = express()

app.use(express.static('./dist'))

app.listen(8800,()=>{
    console.log("server running at http://127.0.0.1:8800")
})

2、开启gzip压缩
在server文件夹中输入命令：npm i compression -D，修改app.js：

const express = require('express')

const compression = require('compression')

const app = express()

app.use(compression())
app.use(express.static('./dist'))

app.listen(8800,()=>{
    console.log("server running at http://127.0.0.1:8800")
})

3、.配置https服务
首先，需要申请SSL证书，将证书放入serve文件夹下。修改app.js文件：

const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')

const app = express()
//创建配置对象设置公钥和私钥
const options = {
    cert:fs.readFileSync('./full_chain.pem'),
    key:fs.readFileSync('./private.key')
}

app.use(compression())
app.use(express.static('./dist'))

// app.listen(8800,()=>{
//     console.log("server running at http://127.0.0.1:8800")
// })

//启动https服务
https.createServer(options,app).listen(443)

4.使用pm2管理应用
server文件中安装pm2：npm i pm2 -g
使用pm2启动项目：pm2 start app.js --name 自定义名称
查看项目列表命令：pm2 ls
重启项目：pm2 restart 自定义名称或者id
停止项目：pm2 stop 自定义名称或者id
删除项目：pm2 delete 自定义名称或者id