生成打包报告，根据报告优化项目，然后添加进度条，安装nprogress插件，在main.js下编辑代码

//导入进度条插件
import NProgress from 'nprogress'
//导入进度条样式
import 'nprogress/nprogress.css'//请求在到达服务器之前，先会调用use中的这个回调函数来添加请求头信息
axios.interceptors.request.use(config => {//当进入request拦截器，表示发送了请求，我们就开启进度条NProgress.start()//为请求头对象，添加token验证的Authorization字段config.headers.Authorization = window.sessionStorage.getItem("token")//必须返回configreturn config
})
//在response拦截器中，隐藏进度条
axios.interceptors.response.use(config =>{//当进入response拦截器，表示请求已经结束，我们就结束进度条NProgress.done()return config
})

在.prettierrc文件中，设置"printWidth":200, 将每行代码的文字数量更改为200

安装一个插件（babel-plugin-transform-remove-console）在项目build阶段移除所有的console信息打开项目控制台，点击依赖->开发依赖，输入babel-plugin-transform-remove-console，安装打开

babel.config.js，编辑代码如下：

/项目发布阶段需要用到的babel插件
const productPlugins = []//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){//发布阶段productPlugins.push("transform-remove-console")
}module.exports = {"presets": ["@vue/app"],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}],...productPlugins]
}

默认情况下，vue-cli 3.0生成的项目，隐藏了webpack配置项，如果我们需要配置webpack 需要通过vue.config.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')})//开发模式config.when(process.env.NODE_ENV === 'development',config=>{config.entry('app').clear().add('./src/main-dev.js')})}
}

补充： chainWebpack可以通过链式编程的形式，修改webpack配置 configureWebpack可以通过操作对象的形式，修改webpack配置

B.第三方库启用CDN

默认情况下，依赖项的所有第三方包都会被打包到js/chunk-vendors.**.js文件中，导致该js文件过大那么我们可以通过externals排除这些包，使它们不被打包到js/chunk-vendors.**.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')})}
}

设置好排除之后，为了使我们可以使用vue，axios等内容，我们需要加载外部CDN的形式解决引入依赖项。打开开发入口文件main-prod.js（原文件为main.js，复制一个为开发用的js，一个发布上线用的js，另一个为dev.js）,删除掉默认的引入代码

然后打开public/index.html添加外部cdn引入代码（即那些带有http的链接，如<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">）

C.Element-UI组件按需加载

根据习惯，日常使用即按需加载即可，不要选择全部导入

D.路由懒加载

当路由被访问时才加载对应的路由文件，就是路由懒加载。路由懒加载实现步骤： 1.安装 @babel/plugin-syntax-dynamic-import 打开vue控制台，点击依赖->安装依赖->开发依赖->搜索@babel/plugin-syntax-dynamic-import 点击安装。

2.在babel.config.js中声明该插件，打开babel.config.js

//项目发布阶段需要用到的babel插件
const productPlugins = []//判断是开发还是发布阶段
if(process.env.NODE_ENV === 'production'){//发布阶段productPlugins.push("transform-remove-console")
}module.exports = {"presets": ["@vue/app"],"plugins": [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}],...productPlugins,//配置路由懒加载插件"@babel/plugin-syntax-dynamic-import"]
}

将路由更改为按需加载的形式，打开router.js，更改引入组件代码如下，

前面为名称，然后生成的放到那个文件下，组件在哪个位置，重复操作即可

const Login = () => import(/* webpackChunkName:"login_home_welcome" */ './components/Login.vue')
// import Login from './components/Login.vue'

E.首页内容定制

开发环境的首页和发布环境的首页展示内容的形式有所不同如开发环境中使用的是import加载第三方包，而发布环境则是使用CDN，那么首页也需根据环境不同来进行不同的实现我们可以通过插件的方式来定制首页内容，打开vue.config.js，编写代码如下：

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中使用插件判断是否为发布环境并定制首页内容

<%输出内容%>

  <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

F项目上线

创建一个新的文件夹，然后初始化仓库 npm init -y

本地安装express npm i exoress -S

将完成好的项目打包生成的dist文件复制到这个新的文件夹下面，然后在文件夹创建一个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（输入app按tab健可补全代码）

开启gzip压缩

输入命令：npm i compression -D 打开app.js,编写代码：

const express = require('express')const compression = require('compression')const app = express()app.use(compression())
app.use(express.static('./dist'))app.listen(8998,()=>{console.log("server running at http://127.0.0.1:8998")
})

配置https服务（有些密码，银行卡这些的话http不安全，就要用到https了）

配置https服务一般是后台进行处理，前端开发人员了解即可。首先，需要申请SSL证书，进入FreeSSL首页 - FreeSSL.cn一个提供免费HTTPS证书申请的网站官网在后台导入证书，打开今天资料/素材，复制素材中的两个文件到vue_shop_server中打开app.js文件，编写代码导入证书，并开启https服务

const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')const app = express()
//创建配置对象设置公钥和私钥
const options = {cert:fs.readFileSync('./full_chain.pem'),key:fs.readFileSync('./private.key')
}app.use(compression())
app.use(express.static('./dist'))// app.listen(8998,()=>{
//     console.log("server running at http://127.0.0.1:8998")
// })//启动https服务
https.createServer(options,app).listen(443)

使用pm2管理应用（除了自定义名称管理项目，也可以用id管理项目）

安装pm2 npm i pm2 -g

启动项目：：pm2 start app.js --name 自定义名称

查看项目列表命令：pm2 ls

重启项目：pm2 restart 自定义名称

停止项目：pm2 stop 自定义名称

删除项目：pm2 delete 自定义名称

vue项目优化及步骤相关推荐

【前端优化 Vue项目优化】如何避免浏览器卡顿，实现性能优化cdn？
提示:前端查漏补缺,仅代表个人观点. 文章目录一.前言二.前端优化方法 1. 减少请求,压缩文件 2. CSS和JavaScript管理 3. 设置内容缓存 4. 减少页面重定向 5. CDN网络 ...
Vue项目优化打包——前端加分项
前言 Vue项目开发完毕后,对项目进行打包发布之前,必不可少的操作就是项目优化,这也是程序猿的加分项.跟随本文的脚步来看看如何对项目进行优化吧~ 一.路由懒加载为什么需要路由懒加载当刚运行项目的时 ...
浅谈 Vue 项目优化
前几天看到大家说 vue 项目越大越难优化,带来很多痛苦,这是避免不了的,问题终究要解决,框架的性能是没有问题的,各大测试网站都有相关数据.下面进入正题基础优化所谓的基础优化是任何 web 项目都 ...
Vscode创建vue项目的详细步骤
目录一.概述操作的前提二.操作步骤一.概述后端人员想在IDEA里面创建一个Vue的项目,但是这非常麻烦,用vscode这个前端专用软件创建就会非常快速. 操作的前提 1.安装vscode软件 ...
vue项目优化 - 网站首屏加载时间
文章目录 1. 首先打包后看看加载时间 2. vendor 2.1. 路由懒加载 2.2. (@vue/cli < 3.0.0) map.gzip.console.log 2.3. (@vue/ ...
如何使用vue-cli来搭建vue项目？详细步骤跟着我来吧！
目录一.什么是vue-cli? 二.前提:搭建好NodeJS环境安装vue-cli 三.使用脚手架vue-cli(2.X版)来构建项目第一步第二步第三步第三步第四步三.SPA完成路由的 ...
Vue 项目优化图片
我们通常都会借助 webpack 打包工具,对小图进行转 base64, 或者使用字体图标等功能进行优化,以及制作雪碧图来减少访问请求次数等.在访问一个项目中,有时候我们通过接口访问图片资源时,图片加 ...
如何运行vue项目（详细步骤）
1.首先,将项目里的"node_modules"文件夹删除,这是vue项目的依赖包. 因为"node_modules"文件夹太大,一般不会打包上传到svn.gi ...
Vue项目上线打包步骤
1.在vue.config.js中配置publicPath,只需给默认的添加一个"." {publicPath: './' } 2.在package.json中找打包命令,例如:b ...

vue项目优化及步骤

B.第三方库启用CDN

C.Element-UI组件按需加载

D.路由懒加载

E.首页内容定制

vue项目优化及步骤相关推荐

最新文章

热门文章