vue项目上线和优化

简介: vue项目上线和优化

一、上线

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工具类

 


相关文章
|
23天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
23天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
21 1
|
23天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
23天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1059 0
|
25天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
26天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
31 1
vue学习第一章
|
26天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
24 1
vue学习第三章
|
27天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
35 1
vue学习第四章
|
26天前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
23 1
vue学习第7章(循环)