一、上线
1、nginx服务器发布项目
将dist下文件夹上传到服务器指定的文件夹中,通过nginx映射路径访问即可
2、node服务器发布项目
没用之前一个静态资源文件1m传输也是1m 使用gzip后 传入100k
配置https配置
一般后端人员完成
申请ssl证书
个人使用申请免费的使用
app.js中配置
使用pm2管理服务器上的网站应用
cmd打开node项目 运行node .\app.js
浏览器输入127.0.0.1访问
当关闭cmd此时无法访问
使用pm2后 关闭cmd也能访问
二、项目优化策略
1、生成打包报告
方式1:命令参数形式生成报告
vue-cli-service build --report
方式2:vue ui生成
2、通过vue.config.js修改webpack得默认配置
通过vue cli3生成得项目,默认隐藏了所有得webpack配置项,目的就是为了屏蔽所有得配置过程,如果要修改,项目根目录下增加一个vue.config.js进行配置,基本配置如下
module.exports = {
//选项
}
具体能够配置哪些选项,参考配置参考 | Vue CLI
3、为开发模式于发布模式指定不同的打包入口
默认情况下,开发模式和发布模式共用一个打包入口文件 即main.js,为了将项目的开发过程和发布过程分离,可以为两种模式指定各自的入口文件,即开发模式的入口文件为main-dev.js,发布模式入口文件为main-prod.js
在vue.config.js中通过configurewebpack(操作对象的形式)或者chainwebpack(链式编程形式)来自定义webpack打包的入口文件
通过chainwebpack自定义打包代码
需要删除src下的main.js并创建main-dev和main-prod
module.exports = {
chainWebpack:config =>{
//build发布环境
config.when(process.env.NODE_ENV === 'production',config =>{
config.entry('app').clear().add('./src/main-prod.js')
})
//serve开发环境
config.when(process.env.NODE_ENV === 'development',config =>{
config.entry('app').clear().add('./src/main-dev.js')
})
}
}
4、通过externals加载外部cdn资源
默认情况下 通过import语法导入的第三方依赖最终会被打包成同一个文件中,从而导致打包后单文件体积过大
通过webpack的externals节点来配置加载外部的cdn资源 方式声明在externals中的第三方依赖包都不会被打包
具体配置代码
5、通过cdn优化element-ui打包
6、首页内容定制
发布模式配置
7、路由懒加载
三、vue工具类