vue项目上线和优化-CFANZ编程社区

一、上线

1、nginx服务器发布项目

将dist下文件夹上传到服务器指定的文件夹中，通过nginx映射路径访问即可

2、node服务器发布项目

vue项目上线和优化_nginx

没用之前一个静态资源文件1m传输也是1m 使用gzip后传入100k

vue项目上线和优化_加载_02

配置https配置

一般后端人员完成

申请ssl证书

个人使用申请免费的使用

vue项目上线和优化_nginx_03

vue项目上线和优化_开发模式_04

app.js中配置

使用pm2管理服务器上的网站应用

cmd打开node项目运行node .\app.js

浏览器输入127.0.0.1访问

当关闭cmd此时无法访问

使用pm2后关闭cmd也能访问

vue项目上线和优化_开发模式_05

二、项目优化策略

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')
        })
    }
}