手写一个服务器代码将《vue电商后台管理系统》部署上去上线、打包_技术前端，忠于热爱 @0.活在分浪里

网络投稿 02-07 1194

我将在博文中全程以cnpm作为代码格式，为了好复制，它快啊！你要知道node安装包自带npm，npm下载cnpm才可以使用cnpm

今日目标：

?1.上线vue电商后台管理项目

?2.手写搭建服务器并挂载（node）

?3.打包优化完成上线

前期回顾? ???

终于有人能把服务器说的这么直白了_活在风浪里的博客-CSDN博客十多万字超详细的电商后台管理系统Vue项目，从零开始，包括后面的打包上线优化，挂载到服务器上如何操作，看后定会收获颇多 !https://blog.csdn.net/m0_57904695/article/details/122938095

%20 介绍：%20

这是我写的后台管理项目，今日就是操作它（15万字详细教程）我给它贴上来，如果只看打包部署上线，亲往下快进

%20

结合%20服务器+后端+前端，完成%20vue项目%20后台管理系统_活在风浪里的博客-CSDN博客亲测可用%20gitee%20网址%20包括php包，后端node.js代码，前端源码%20以及文档接口说明%20+%20结合%20服务器+后端+前端，完成%20vue项目%20后台管理系统https://blog.csdn.net/m0_57904695/article/details/122648464?spm=1001.2014.3001.5502再此之前我写过一篇部署nginx，从写代码达到手机App极为细致，看后定收获颇多！主要是vant、手机端

%20

一步一步,一步%20从代码到,打包成为手机App,上传至nginx服务器%20(Vue项目)_活在风浪里的博客-CSDN博客一步一步,一步%20从代码到,打包成为手机App,上传至ngnix服务器%20(Vue项目)https://blog.csdn.net/m0_57904695/article/details/122500485?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164506544716780265430357%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=164506544716780265430357&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-122500485.nonecase&utm_term=%E4%B8%8A%E7%BA%BF&spm=1018.2226.3001.4450

%20 首次打包查看包体积?（7.09MB）%20

?vue.config.js 没有就新建一个，vue.config.js解释:就是修改webpack 的默认配置项

重要！！?1-17步骤通过ctrl+f 搜索步骤，在代码注释里有下载依赖的命令，要下载依赖的，下面是代码，必须下载依赖才能用

// 1-17步骤 // 3 加载path模块和定义resolve方法，把相对路径转换成绝对路径 const path = require('path') const resolve = dir => path.join(__dirname, dir) // 5 安装去除log包 cnpm install uglifyjs-webpack-plugin --save-dev //6引入去除log文件 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') const isProduction = process.env.NODE_ENV === 'production'; // 13 对资源文件进行压缩引入 const CompressionWebpackPlugin = require('compression-webpack-plugin') // 8 使用externals设置排除项 const externals = { //这里如果写的不对，dist/index打开会报xx未定义， // 模块名称和作用域名（对应的是window里面的全局变量名） // 模块名称和作用域名一定要写对，不然不是报未定义就是打包cdn引入不进去！！！ vue: 'Vue', "element-ui": "element", 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor', } // CDN外链，会插入到index.html中 const cdn = { // 开发环境 dev: { css: [], js: [] }, // 生产环境 build: { // element在vue下，顺序不对也会报错 css: [ "https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css", 'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css', 'https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css', 'https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css', 'https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css', ], js: [ "https://cdn.staticfile.org/vue/2.5.22/vue.min.js", "https://cdn.staticfile.org/element-ui/2.8.2/index.js", "https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js", "https://cdn.staticfile.org/axios/0.18.0/axios.min.js", "https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js", "https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js", "https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js", "https://cdn.staticfile.org/quill/1.3.4/quill.min.js", "https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js", ] } } module.exports = { // 1 publicPath: './', // 静态资源路径（默认/，打包后会白屏） // 2 productionSourceMap: false, //错误映射,关闭会减少一半体积 devServer: { hotOnly: true, // 热更新 open: true }, // 4 添加别名 chainWebpack: config => { config.resolve.alias .set('@', resolve('src')) .set('assets', resolve('src/assets')) .set('api', resolve('src/api')) .set('views', resolve('src/views')) .set('components', resolve('src/components')) // 10 添加CDN参数到htmlWebpackPlugin配置中 // 11 在pubilc/index 中配置我放在最下面了 // 12 cnpm i compression-webpack-plugin -D 对资源文件进行压缩 config.plugin('html').tap(args => { if (isProduction) { args[0].cdn = cdn.build } else { args[0].cdn = cdn.dev } return args }) // 16 配置图片压缩 config.module .rule('images') .use('image-webpack-loader') .loader('image-webpack-loader') .options({ bypassOnDebug: true }) .end() }, // 7 使用去除log configureWebpack: config => { const plugins = []; if (isProduction) { // 9 配置cdn config.externals = externals // 配置cdn plugins.push( new UglifyJsPlugin({ uglifyOptions: { output: { comments: false, // 去掉注释 }, warnings: false, compress: { drop_console: true, drop_debugger: false, pure_funcs: ['console.log'] //移除console } } }), // 14 对资源文件进行压缩引入进行配置： new CompressionWebpackPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', // test: /\.js$|\.html$|\.json$|\.css/, test: /\.js$|\.json$|\.css/, threshold: 10240, // 只有大小大于该值的资源会被处理 minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理 // deleteOriginalAssets: true // 删除原文件 }) // 15 安装图片压缩 cnpm install image-webpack-loader --save-dev 容易安装不上 // 若安装过 image-webpack-loader 先卸载 !!! // npm 安装的npm 则npm 移除 // npm uninstall image - webpack - loader //如果yarn安装的，则yarn 移除 // yarn remove image - webpack - loader ), // 17公共代码抽离 config.optimization = { splitChunks: { // 分割代码块 cacheGroups: { vendor: { //第三方库抽离 chunks: 'all', test: /node_modules/, name: 'vendor', minChunks: 1, //在分割之前，这个代码块最小应该被引用的次数 maxInitialRequests: 5, minSize: 0, //大于0个字节 priority: 100 //权重 }, common: { //公用模块抽离 chunks: 'all', test: /[\\/]src[\\/]js[\\/]/, name: 'common', minChunks: 2, // 在分割之前，这个代码块最小应该被引用的次数 maxInitialRequests: 5, minSize: 0, //大于0个字节 priority: 60 }, styles: { //样式抽离 name: 'styles', test: /\.(sa|sc|c)ss$/, chunks: 'all', enforce: true }, runtimeChunk: { name: 'manifest' } } } } } }, }

重要！！！? 将以上代码赋值到?vue.config.js文件中，根据自己的项目去配置cdn

图例：

可以根据自己项目所需的cdn链接自己搜索配置?BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

本项目所需的cdn

<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" /> <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" /> <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script> <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script> <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script> <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>  <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>  <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>

cdn配置好后，在public/index.html添加如下代码

<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" /> <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" /> <% } %>  <% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %> <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script> <% } %>

需要配置环境变量，上线网址，运行npm run build 就是生产环境上线环境了，所以需要配置上线的网址，下面第三张图

配置环境变量：参考Vue配置多环境变量,原来是这么回事啊_活在风浪里的博客-CSDN博客https://blog.csdn.net/m0_57904695/article/details/122269218

可以通过在build后加上 --report查看打包报告?

// package.json "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build --report" },

??到现在已经配置好了，我们在重新运行打包命令，查看dist文件大小

?打包完成后要这个打包报告就没用了可以删除掉，

项目上线 ?通过node创建服务器，自己写一个简单服务器

1：在根目录创建一个文件夹server? cd 进入sever目录

2: 输入命令npm init -y 一路回车初始化得到package.json

3：初始化包之后，输入命令cnpm i express -S下载依赖

4:复制dist文件夹，粘贴到server中

5:server文件夹中创建app.js文件,编写代码如下

//学过node都知道，只是导入express，我们刚才下载好了 const express = require('express') // 将方法赋值给app const app = express() //使用中间件加载静态资源./dist,我们需要将dist粘贴到同级目录 app.use(express.static('./dist')) //监听端口8888，端口号随你写建议在3000以上不予默认端口冲突，就类似酒店的房门号，你我 //都是汉子可不能住一间， app.listen(8888,()=>{ console.log("服务器成功运行") })

6:在终端中输入?node app.js? 运行服务器?

效果图：

我自己在浏览器url输入：http://localhost:8888/? 你要访问需要我俩在同一局域网，输入我电脑ip：端口号? ?如下图：

这样就部署在我们自己写的服务器了，你输入我的电脑id和端口，我们在同一局域网你也可以访问这个项目了，这是我的电脑充当了服务器，不过要一直开着终端，可以借用插件，开一个进程，这样我关闭终端，你依旧可以访问项目

使用pm2管理应用开启进程?

?打开server文件夹的终端，输入命令：cnpm i pm2 -g 使用pm2启动项目，在终端中输入命令：pm2 start app.js --name 自定义名称查看项目列表命令：pm2 ls重启项目：pm2 restart 自定义名称停止项目：pm2 stop 自定义名称删除项目：pm2 delete自定义名称 ?

开启gzip压缩

打开server文件夹的终端，输入命令：cnpm i compression -D 打开app.js,编写代码：?

//学过node都知道，只是导入express，我们刚才下载好了 const express = require('express') const compression = require('compression') // 将方法赋值给app const app = express() app.use(compression()) //使用中间件加载静态资源./dist,我们需要将dist粘贴到同级目录 app.use(express.static('./dist')) //监听端口8888，端口号随你写建议在3000以上不予默认端口冲突，就类似酒店的房门号，你我 //都是汉子可不能住一间， app.listen(8888, () => { console.log("服务器成功运行") })

此时已成功将项目打包并部署服务器了，

结语：

希望大家都能好好的，没有加不完的班，修不完bug