2020 Vue零基础 基于Element-UI开发 (全)项目优化与部署上线(npm,基于vue ui) 下篇
发布日期:2021-06-29 14:28:53
浏览次数:2
分类:技术文章
本文共 6261 字,大约阅读时间需要 20 分钟。
文章目录
1、引言
寒假是用来反超的!
一起来学习Vue把,这篇博客是关于我们项目优化与上线,请多指教~
2、承接上篇
上篇地址:
附上配置相关源码:
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、项目上线相关配置
- 通过 node 创建 web 服务器。
- 开启 gzip 配置。
- 配置 https 服务。
- 使用 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吧~
学如逆水行舟,不进则退
转载地址:https://chocolate.blog.csdn.net/article/details/104079909 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
第一次来,支持一个
[***.219.124.196]2024年04月27日 19时20分05秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
需要吗?2000GB+学习视频教程 面试资料免费下载
2019-04-29
MySQL对已存在数据库表添加自增ID字段
2019-04-29
idea中的一些常用快捷键
2019-04-29
js校验表单后提交表单的三种方法总结【转载】
2019-04-29
欢迎使用CSDN-markdown编辑器
2019-04-29
a标签中href调用js的几种方法
2019-04-29
jstl标签详解
2019-04-29
Eclipse中使用SVN的使用
2019-04-29
JSON.parse和eval的区别
2019-04-29
JQuery中$.ajax()方法参数详解
2019-04-29
正则表达式的数字实例
2019-04-29
【转】EasyUI 验证
2019-04-29
Django实战---商城购物车的增删改、显示和合并购物车
2019-04-29
Django项目实战----添加支付宝支付
2019-04-29
DRF框架---前言(简单使用)
2019-04-29
字符串外面是b“ “的转换 -亲测有效
2019-04-29
单通道和多通道卷积
2019-04-29
npy文件和pkl文件的保存和读取
2019-04-29