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引入的版本保持一致

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue后台管理系统项目从0到1,可以按照以下步骤进行: 1. 创建项目:首先,使用Vue CLI工具创建一个新的Vue项目。可以使用命令行或图形界面工具来完成这一步骤。 2. 设计界面:根据需求,设计后台管理系统的界面。可以使用UI组件库(如Element UI、Ant Design Vue等)来加快开发速度。 3. 路由配置:使用Vue Router来配置路由,定义页面之间的跳转关系。可以根据后台管理系统的功能模块进行划分,设计合理的路由结构。 4. 数据管理:使用Vuex来管理全局的状态和数据。可以定义各个模块的状态、获取数据的方法,并在组件中使用。 5. 接口调用:根据后台管理系统与后端API的交互需求,使用Axios或其他HTTP请求库来发送请求并处理响应数据。 6. 功能开发:根据需求逐步开发各个功能模块。可以按照模块划分,分别开发不同的页面和组件。 7. 数据展示:根据后台管理系统的需求,使用Vue组件来展示数据,例如表格、图表等。可以使用第三方库来提供更多扩展功能。 8. 权限控制:根据需求,实现后台管理系统的权限控制功能。可以使用路由守卫、角色权限配置等方式来限制用户的操作权限。 9. 测试和调试:完成功能开发后,进行测试和调试,确保后台管理系统的稳定性和可靠性。 10. 打包部署:最后,使用Vue CLI提供的打包命令,将项目打包为静态文件,并部署到服务器上。 通过以上步骤,你可以从零开始构建一个Vue后台管理系统项目。当然,在实际开发中还会遇到各种具体问题和挑战,需要根据具体情况进行解决。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值