vue后台管理系统打包上线到node

项目准备

1. 配置 alias 别名

使用vue-cli开发项目，最大特色是组件化。组件中频繁引用其他组件或插件。我们可以把一些常用的路径定义成简短的名字。方便开发中使用。

//加载path模块
const path = require('path')
//定义resolve方法，把相对路径转换成绝对路径
const resolve = dir => path.join(__dirname, dir)

module.exports = {
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('api', resolve('src/api'))
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'))
  }
}

注意：对于图片我们要在路径前面加~

<img src="~@/assets/img/logo.png" alt="">

2. 项目结束后打包前webpack配置

module.exports = {
  // 静态资源路径（默认/，打包后会白屏）
  publicPath: './', 
  //去除生产环境的productionSourceMap
  productionSourceMap: false,
}

3. 生成打包报告

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --report"
  }

之后你运行npm run build就会出现一个report.html,运行到浏览器后可以清除的看见文件的体积大小

打包

1. 去除console.log()输出打印

下载插件
cnpm i babel-plugin-transform-remove-console -D

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

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

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

2. 使用cdn

在项目中我是创建了两个入口文件main-dev.js(开发入口文件)和main-prod.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')
            
            //使用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')
        })
    }
}

打开开发入口文件main-prod.js,删除掉默认的引入代码

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入element-ui
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// 重置样式
import '@/assets/reset.css'
import '@/assets/common.css'

// 全局注册树形表格
import TreeTable from 'vue-table-with-tree-grid'
// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器样式
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'


//导入进度条样式
// import 'nprogress/nprogress.css'

Vue.config.productionTip = false
// Vue.use(ElementUI);



// 全局注册富文本编辑器
Vue.use(VueQuillEditor)
// 全局注册表格树
Vue.component('tree-table',TreeTable)

// 全局时间过滤器
Vue.filter('formTime',(val)=>{
  let t = new Date(val)
  let y = t.getFullYear()
  let m = t.getMonth() + 1
  let d = t.getDate()
  let h = t.getHours()
  let f = t.getMinutes()
  let s = t.getSeconds()
  // 定义一个添0函数
  function addZero(val) {
      return val > 10 ? val : '0' + val
  }
  return `${addZero(y)}-${addZero(m)}-${addZero(d)} ${addZero(h)}:${addZero(f)}:${addZero(s)}`
})


new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

然后打开public/index.html添加外部cdn引入代码

   <!-- nprogress 的样式表文件 -->
   <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
   <!-- 富文本编辑器 的样式表文件 -->
   <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />
   <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />
   <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />
   <!-- element-ui 的样式表文件 -->
   <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.6/theme-chalk/index.css" />

   <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>
   <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
   <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
   <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
   <!-- 富文本编辑器的 js 文件 -->
   <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

   <!-- element-ui 的 js 文件 -->
   <script src="https://cdn.staticfile.org/element-ui/2.15.6/index.js"></script>

当我们开发环境的时候是不需要cdn加载的，使用插件判断是否为发布环境并定制首页内容

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
            })
        })
    }
}

然后在public/index.html中判断

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

    <% if(htmlWebpackPlugin.options.isProd){ %>
    <!-- nprogress 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
    ........
    <!-- element-ui 的 js 文件 -->
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>
    <% } %>
  </head>
  .......

项目上线

1. 通过node创建服务器
在src文件下创建一个server文件，在终端server文件中打开输入：

npm init -y  会生成一个package.json

初始化包之后，输入

npm i express -S

之后将打包生成的dist文件夹放置到server文件下，再创建一个app.js

app.js文件
const express = require('express')

const app = express()

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

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

在终端中输入node app.js启动服务器，输入服务器的地址(http://127.0.0.1:8998)就可以访问到你的项目了。

2. 使用pm2管理应用

启动服务器后我们关闭黑窗口后服务器就会停止，如果不想一直打开黑窗口可以使用pm2进行管理。
打开server文件夹，打开终端输入：

npm i pm2 -g

使用pm2启动项目，在终端中输入命令：pm2 start app.js --name 自定义名称
查看项目列表命令：pm2 ls
重启项目：pm2 restart 自定义名称
停止项目：pm2 stop 自定义名称
删除项目：pm2 delete自定义名称

打包中遇见的问题

vue 项目上线打包后 出现 Error:if there‘s nested data,rowKey is required

解决办法：
package.json 里面的element-ui的版本，必须要跟public/index.html中的CDN引入的版本保持一致