项目准备

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: './', //去除生产环境的productionSourceMapproductionSourceMap: 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() + 1let 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=>{//添加参数isProdargs[0].isProd = truereturn args})})config.when(process.env.NODE_ENV === 'development',config=>{config.entry('app').clear().add('./src/main-dev.js')//使用插件config.plugin('html').tap(args=>{//添加参数isProdargs[0].isProd = falsereturn 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引入的版本保持一致

vue后台管理系统打包上线到node相关推荐

vue后台管理系统搭建
vue后台管理系统搭建前提安装node.js 控制台安装yarn:npm install -g yarn 查看yarn版本:yarn --version 注:-g表示的是全局安装淘宝镜像安装:n ...
正确姿势开发vue后台管理系统
项目地址 vue-admin-webapp 欢迎star,fork 前言相信许多人和我一样刚接触 vue 时看文档都很枯燥,看完 vue,还有 vueRouter .vuex .vue-cli.es ...
VUE后台管理系统权限管理
VUE后台管理系统权限管理(面试路由守卫) 1.背景后台管理系统中总会遇到权限分配的问题:这也是一道vue的很经典的面试问题 2.解决思路权限管理无非前端或者后台解决先说一下前端解决的思路:在设 ...
12款vue后台管理系统（可下载）
vue官方的后台管理仪表盘框架是:vue-admin,除此之外还有很多其他优秀的后台管理集成框架,正所谓前人栽树,后人乘凉.特此记录一下,方面以后要用. 参考下载地址:12款优秀的vue后台管理系统模 ...
哔哩哔哩Allen前端vue后台管理系统笔记
哔哩哔哩Allen前端vue后台管理系统笔记 Element ui 引入全局引入按需引入嵌套路由左侧菜单栏的样式 Container布局,左侧菜单栏commonAside组件 commonAs ...
vue cli3.0打包上线不同环境
vue cli3.0打包上线不同环境 1. cli3.0支持".env"文件配置,在项目的根目录下配置".env"文件,根据不同的环境命名不同的文件名称,如: ...
一套通用的VUE后台管理系统方案（vite+Vue3+ts）
通用后台管理系统整体架构方案(Vue) 项目创建,脚手架的选择(vite or vue-cli) vue-cli基于webpack封装,生态非常强大,可配置性也非常高,几乎能够满足前端工程化的所有要求 ...
vue后台管理系统实践方案总结(一)
项目概述基本业务概述根据不同的应用场景,电商系统一般都提供了PC端.移动APP.移动Web.微信小程序等多种终端访问方式管理系统功能电商后台管理系统用于管理账号.商品分类.商品信息.订单.数据 ...
看看人家 SpringBoot + vue后台管理系统，多么优雅...
如何写一个优雅的项目?为了让更多人学习前后端分离项目,特意录制了一个基于Spring security + Jwt + Vue的前后端分离后台管理系统VueAdmin,手把手完整教学,另外还写了两篇完 ...

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

项目准备

打包

项目上线

打包中遇见的问题

vue后台管理系统打包上线到node相关推荐

最新文章

热门文章