2020 Vue零基础 基于Element-UI开发 （全）项目优化与部署上线（npm，基于vue ui） 下篇

1、引言

寒假是用来反超的！一起来学习Vue把，这篇博客是关于我们项目优化与上线，请多指教~

2、承接上篇

上篇地址：

推荐阅读——2020 Vue零基础 基于Element-UI开发 （全）项目优化与部署上线（npm，基于vue ui） 上篇

附上配置相关源码：

babel.config.js文件配置

// 项目发布阶段需要用到的 babel 插件
const prodPlugins = []
if(process.env.NODE_ENV === 'production'){
  prodPlugins.push('transform-remove-console')
}

module.exports = {
  'presets': [
    '@vue/cli-plugin-babel/preset'
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk'
      }
    ],
    // 发布产品时的插件数据 
    // ...表示展开运算符 把数组中的每一项展开放在另一个数组中
    ...prodPlugins,
    // 实现路由懒加载
    '@babel/plugin-syntax-dynamic-import'
  ]
}

vue.config.js文件配置

module.exports = { 
    chainWebpack: config => { 
        // 发布模式
        config.when(process.env.NODE_ENV === 'production', config => { 
            config.entry('app').clear().add('./src/main-prod.js') 
            config.set('externals', { 
                vue: 'Vue', 
                'vue-router': 'VueRouter', 
                axios: 'axios', 
                lodash: '_', 
                echarts: 'echarts', 
                nprogress: 'NProgress', 
                'vue-quill-editor': 'VueQuillEditor' 
            }) 
            config.plugin('html').tap(args => {
                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 => {
                args[0].isProd = false
                return args
            })
        }) 
    } 
} 

router文件夹下index.js文件配置

import Vue from 'vue'
import VueRouter from 'vue-router'
/* 实现懒加载模式 */
// import Login from '../components/Login.vue'
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
// import Home from '../components/Home.vue'
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
// import Welcome from '../components/Welcome.vue'
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')

// import Users from '../components/user/Users.vue'
const Users = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/user/Users.vue')
// import Rights from '../components/power/Rights.vue'
const Rights = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Rights.vue')
// import Roles from '../components/power/Roles.vue'
const Roles = () => import(/* webpackChunkName: "Users_Rights_Roles" */ '../components/power/Roles.vue')

// import Cate from '../components/goods/Cate.vue'
const Cate = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Cate.vue')
// import Params from '../components/goods/Params.vue'
const Params = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Params.vue')

// import GoodsList from '../components/goods/List.vue'
const GoodsList = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/List.vue')
// import Add from '../components/goods/Add.vue'
const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/Add.vue')

// import Order from '../components/order/Order.vue'
const Order = () => import(/* webpackChunkName: "Order_Report" */ '../components/order/Order.vue')
// import Report from '../components/report/Report.vue'
const Report = () => import(/* webpackChunkName: "Order_Report" */ '../components/report/Report.vue')


Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  { path: '/home', component: Home ,
    redirect: '/welcome',
    children:[
    {path: '/welcome', component: Welcome},
    {path: '/users' , component:Users},
    {path: '/rights' , component:Rights},
    {path: '/roles' , component:Roles},
    {path: '/categories' , component:Cate},
    {path: '/params' , component:Params},
    {path: '/goods' , component:GoodsList},
    {path: '/goods/add' , component:Add},
    {path: '/orders' , component:Order},
    {path: '/reports' , component:Report},

  ]
  }
]

const router = new VueRouter({
  routes
})

//挂载路由导航
router.beforeEach((to, from, next) => {
  //to 将要访问的路径
  //from 代表从哪个路径跳转而来
  //next是一个函数，代表放行
  //  next()代表放行  next('/login') 强制跳转

  if (to.path == '/login') return next()
  //获取token
  const tokenStr = window.sessionStorage.getItem("token");
  if (!tokenStr) return next('/login')
  next()

})


export default router

3、项目上线相关配置

1. 通过 node 创建 web 服务器。
2. 开启 gzip 配置。
3. 配置 https 服务。
4. 使用 pm2 管理应用。

4、上线——通过node创建Web服务器

创建 node 项目，并安装 express，通过 express 快速创建 web 服务器，将 vue 打包生成的 dist 文件夹，
托管为静态资源即可，关键代码如下：

const express = require('express') 
// 创建 web 服务器 
const app = express() 
 
// 托管静态资源 
app.use(express.static('./dist')) 
 
// 启动 web 服务器 
app.listen(80, () => { 
  console.log('web server running at http://127.0.0.1') 
})

我们首先创建一个新的空文件夹，这里我创建的是vue_shop_server，然后用vscode或者其他工具打开

在终端内输入如下指令，初始化一个包管理配置文件

npm init -y

然后，安装第三方express包

npm install express -S

然后将我们之前优化好的vue_shop里新生成的dist文件夹拷贝一份到vue_shop_server里去，里面包含这些文件

然后新建一个app.js文件

将之前托管的关键代码复制到里面即可使用

然后我们在终端输入以下命令，进行测试一下，出现下面这段话代表app.js启动成功

然后地址栏输入127.0.0.1就能进入我们的项目登录界面了！

5、上线—— 开启 gzip 配置

① 使用 gzip 可以减小文件体积，使传输速度更快。
② 可以通过服务器端使用 Express 做 gzip 压缩。其配置如下：

 // 安装相应包   
 npm install compression -S
 // 导入包   
 const compression = require('compression');   
 // 启用中间件   
 app.use(compression());

6、配置 HTTPS 服务

为什么要启用 HTTPS 服务？

• 传统的 HTTP 协议传输的数据都是明文，不安全
• 采用 HTTPS 协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全

申请 SSL 证书（https://freessl.org）

① 进入 https://freessl.cn/ 官网，输入要申请的域名并选择品牌。
② 输入自己的邮箱并选择相关选项。
③ 验证 DNS（在域名管理后台添加 TXT 记录）。
④ 验证通过之后，下载 SSL 证书（ full_chain.pem 公钥；private.key 私钥）。

在后台项目中导入证书

  const https = require('https'); 
  const fs = require('fs'); 
  const options = { 
      cert: fs.readFileSync('./full_chain.pem'), 
      key: fs.readFileSync('./private.key') 
  } 
  https.createServer(options, app).listen(443); 

7、使用 pm2 管理应用

①在服务器中安装 pm2：npm i pm2 -g
② 启动项目：pm2 start 脚本 --name 自定义名称
③ 查看运行项目：pm2 ls
④ 重启项目：pm2 restart 自定义名称
⑤ 停止项目：pm2 stop 自定义名称
⑥ 删除项目：pm2 delete 自定义名称

8、结束语及进一步展望

至此，我们的项目开发就结束了，然后就是制作一个最终目录给大家使用，看到了点个关注，不迷路！

Vue全家桶开发电商管理系统码云地址，欢迎一起来学习~

https://gitee.com/Chocolate666/vue_shop

---

最后，看完本篇博客后，觉得挺有帮助的话，可以继续查看专栏其它内容嗷，一起来学习Vue吧~

点击进入Vue❤学习专栏~

学如逆水行舟，不进则退