生成打包报告，根据报告优化项目，然后添加进度条，安装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")
//必须返回config
return 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=>{
//添加参数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中使用插件判断是否为发布环境并定制首页内容
<%输出内容%>
<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 自定义名称
1245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
