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

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 最小的压缩最快 但是消耗cpugzip_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------------------------

1.2 路由使用的依旧是hash模式,避免打包后，出现空白页

2.npm run build 打包项目形成一个dist文件夹

3.服务器阿里云腾讯云相关

之后进行远程连接该服务器进入宝塔面板登录。

1.进入面板下载推荐的软件

之后会有一系列操作跟着走就行要填域名的地方填写服务器公网ip,

3.部署安装完wordpress后，会出现一个基本的成功html页面

5.查看网站能否访问

这样前台项目就算是部署完成了

4.Node后台项目部署

4.1 将github上的后台接口进行压缩，之后同样上传到另一个服务器上（相同的应该也可以），解压缩。

4.2 在软件商场中下载pm2

4.3 点击设置配置PM2管理器 -- 添加项目:

4.4 之后映射自己的公网ip地址，

4.5 进入接口的入口文件中修改端口号我改为的是3333

4.6 重启一下

最后访问一下这个公网ip+端口号看能否访问接口地址（成功的话后台node就算是部署完成了）

仿网易云项目前端服务器部署+Nodejs部署相关推荐

计算机毕业设计Node.js+Vue安卓仿网易云音乐客户端APP(程序+源码+LW+部署)
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流项目运行环境配置: Node.js+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue ...
仿网易云PC端项目-vue
项目GitHub地址: wangyiMusicPlayer. wangyiMusicPlayer--这是一个仿网易云PC端的的项目(vue) 项目简介: 本项目使用的后端接口{接口文档已放在项目中,自 ...
仿网易云音乐项目的开始
开始最近学习前端,比较迷茫,不知道该怎么做.决定做一个项目来梳理并锻炼自己的水平. 准备网上有很多项目,之所以选择了仿网易云音乐的项目,是因为Github上有网易云音乐的接口项目,这样的话可以完全 ...
尚硅谷微信小程序开发仿网易云音乐App 小程序后端接口服务器搭建
目录小程序学习视频相关的教程文档与笔记分享配套服务器源码地址: 接口使用说明文档接口列表启动服务测试服务启动OK网页 http://localhost:3000/test.html编辑 ...
开源项目【LikeCloudMusic 云音】仿网易云音乐
LikeCloudMusic 云音仿网易云音乐v3.7.5,Material Design风格,基于MVP,使用RxBus作为事件总线通信库效果图目前功能扫描本地歌曲存储歌曲及歌单后台播放 ...
高仿网易云音乐(vue实战项目)
高仿网易云音乐(Vue实战项目)
【开源项目学习】源码剖析，学习仿网易云音乐app代码
[前言] 这篇文字不全是讲app代码,而是博主怎么根据代码系统学习梳理的过程,非专业,如有不对,欢迎指出仿网易云音乐app源码地址:https://github.com/aa112901/remus ...
还不会用Flutter？仿网易云音乐项目（已开源）
原作者:公众号boyan 前言 Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面.Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越 ...
怎么做前后端分离的个人博客，内部还有仿网易云音乐模块？点进便知！（基于Vue，Springboot+mybatisplus+SpringCloud+ElasticSearch等框架实现）
入站须知一.个人博客简介 1.1 博客主要页面: 1.1.1 首页 1.1.2 分类页 1.1.3 分类页 1.1.4 归档页 1.1.5 友链页 1.1.6 关于我 1.1.7 留言 ...

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

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

2.npm run build 打包项目形成一个dist文件夹

3.服务器阿里云腾讯云相关

4.Node后台项目部署

仿网易云项目前端服务器部署+Nodejs部署相关推荐

最新文章

热门文章

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

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

2.npm run build 打包项目 形成一个dist文件夹

3.服务器 阿里云 腾讯云 相关

4.Node后台项目部署

仿网易云项目前端服务器部署+Nodejs部署相关推荐

最新文章

热门文章

2.npm run build 打包项目形成一个dist文件夹

3.服务器阿里云腾讯云相关