项目优化，以及项目上线

幽夜忧伤来袭

已于 2022-02-17 16:08:04 修改

阅读量297

点赞数 1

文章标签： vue.js javascript 前端

于 2022-02-17 15:44:18 首次发布

本文链接：https://blog.csdn.net/zy1842250045/article/details/122983658

版权

本文详细介绍了Vue.js项目从优化到上线的全过程，包括添加进度条、错误修复、Webpack配置调整、使用CDN、首页定制、路由懒加载、通过Node.js创建服务器、开启gzip压缩、配置HTTPS服务以及使用pm2进行应用管理。每个步骤都有具体的操作方法和代码示例，是前端开发者项目部署的重要参考。

摘要由CSDN通过智能技术生成

3. 执行npm run build（打包）

项目的其他优化，可借鉴这篇：

项目vue-cli4打包以及优化_zy的博客-CSDN博客

实现步骤：

项目优化：

生成打包报告，根据报告优化项目
第三方库启动，使用CDN
Element-UI组件按需加载
路由懒加载
首页内容定制

项目上线：

通过node创建服务器
开启gzip压缩
配置https服务
使用pm2管理应用

1. 添加进度条

可以给项目添加进度条效果，如，登录页面时，头部上方有进度条显示。

安装插件：

npm install nprogress --save

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

2. 根据报错修改代码

根据ESLint的警告提示更改对应的代码
在.prettierrc文件中更改设置"printWidth":200, 将每行代码的文字数量更改为200

向 .prettierrc 文件中添加代码

{
    "semi":false,
    "singleQuote":true,
    "printWidth":200    //将每行代码的文字数量更改为200
}

3. 执行npm run build（打包）

安装插件：

npm install 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
  ]
}

4. 生成打包报告

命令行形式产生打包报告

在package.json中修改代码（修改完后，需要重新打包）

    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build --report"    //可生成打包报告
    },

修改完后，在dist文件夹下，会中生成report.html文件，打开可有详细的报告（终端中也有报告等，对比数据）。

5. 修改webpack的默认配置

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