仿网易云项目前端服务器部署+Nodejs部署

最新推荐文章于 2024-11-25 17:17:28 发布

ZXLOVE52000

最新推荐文章于 2024-11-25 17:17:28 发布

阅读量435

点赞数 1

分类专栏：前端 NodeJs 文章标签： html5 vue.js node.js css3 javascript

本文链接：https://blog.csdn.net/ZXLOVE52000/article/details/127363498

版权

前端同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

NodeJs

1 篇文章 0 订阅

订阅专栏

本文记录了一次Vue前端项目与Node后台接口的部署过程。首先，对Vue项目进行了优化和压缩配置，然后通过npm run build打包，并在nginx中配置gzip压缩。接着，通过宝塔面板在阿里云服务器上部署Vue项目，实现了前端页面的线上访问。对于Node后台，通过pm2管理器进行部署，修改端口并确保接口可远程访问。整个流程详细介绍了从项目打包到前后端成功上线的步骤。

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

做了几天的仿网易云移动端项目，做出来了不知道怎么部署上线？搞了好久！！！！记录一下！

1.首先（优化 + 检查）项目

1.1 vue.config.js种配置:

安装 npm i compression-webpack-plugin 来使用 gzip 压缩代码

const CompressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {
  publicPath: './', // 基本路径 该配置会为index.html中引入的<script> <link>等标签中的资源路径添加前缀
  outputDir: 'dist', // 输出文件目录
  assetsDir: 'static', // 放置打包生成的静态资源 (js、css、img、fonts) 的目录。
  //   去掉编译文件中map文件
  productionSourceMap: false,
  /* 补充：vue.config中configureWebpack 与 chainWebpack 的 区别!!!
  1.configureWebpack 通过 操作对象的形式，来修改默认的webpack配置，该对象将会被 webpack-merge 合并入最终的 webpack 配置
  2.chainWebpack 通过 链式编程的形式，来修改默认的webpack配置
  */

  chainWebpack (config) {
    if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置...
      config.plugin('compressionPlugin')
        .use(
          new CompressionWebpackPlugin({
            algorithm: 'gzip', // 压缩方式
            test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'), // 匹配压缩文件
            threshold: 10240, // 对大于10k压缩
            minRatio: 0.8
          })
        )
    }
  },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置...
      config.mode = 'production'
      // 配置如何展示性能提示。  例如，如果一个资源超过 250kb，webpack 会对此输出一个警告来通知你。
      config.performance = { // 打包文件大小配置
        /* 入口起点表示针对指定的入口，对于所有资源，要充分利用初始加载时(initial load time)期间。
        此选项根据入口起点的最大体积，控制 webpack 何时生成性能提示。默认值是：250000 (bytes)。 */
        maxEntrypointSize: 10000000,
        /**
         * 资源(asset)是从 webpack 生成的任何文件。此选项根据单个资源体积，控制 webpack 何时生成性能提示。默认值是：250000 (bytes)。
         */
        maxAssetSize: 30000000
      }
    }
  }
}

在nginx中配置：

# ------------------------start------------------------
        gzip on;
        gzip_http_version 1.0;
        gzip_static on;
        gzip_min_length 1;
        gzip_buffers 4 16k;  #设置压缩所需要的缓冲区大小
        gzip_comp_level 6;//等级1-9 最小的压缩最快 但是消耗cpu
        gzip_vary on;
        gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        # ------------------------end------------------------