超全的前端项目部署(一)

vue打包命令#

npm run build

• 产生一个dist文件，里面会有所有项目编译好的内容，还有一个.map文件, 这个是帮助你维护用的 你也可以选择修改一下配置，不生成 > 可以减少编译后的体积。

1. 创建 vue.config.js
2. 代码如下

	module.exports = {
		productionSourceMap: false, // 在你npm run build 不输出, .map文件
	}

 详细可以去看 vue的说明配置: 参见文章: https://juejin.cn/post/6886698055685373965

搭建前端服务器#

• 现在可以拿到一个dist目录， 现在需要去进行服务器搭建， 因为我解决history是在服务端搞定的，所以我直接分享我的方法。
• 创建一个vue-server目录(文件夹)
• 然后生成配置文件执行:
  这里说明一下一般情况写我们提交git是不会吧node_modules目录放上去的，就是因为有这个package.json文件，你从git仓库clone下来之后的第一件事情会去执行npm install， 他会直接去读取package.json中的文件，然后将所有依赖的包都安装下来。

npm init -y

安装express框架#

> npm i express --save 
 上方命令会按照到生产环境中的依赖 "dependencies": {}

安装压缩中间件#

> npm i compression --save 

安装connect-history-api-fallback中间件#

> npm i connect-history-api-fallback --save

创建app.js文件和public目录#

> 目录结构
 vue-server
    public
	  - dist
	  - css
	  - image
	  - js
	  - favicon.cio
	  - index.html
    app.js

app.js内容#

const express = require('express');
const compression = require('compression');
const app = express();
// 解决history的路由模式无法正常访问的中间件
const history = require("connect-history-api-fallback");
// 可以自定义端口
const port = 8081;
// gzip压缩中间件
app.use(compression())
app.use(
  history({
  //  你可以任意修改路径， 但需要保证这个路径下有这个文件; 
    index: "/dist/index.html",
  })
);
app.use(express.static("./public")).listen(port);

• 当然connect-history-api-fallback中间件中也会有很多配置， 有兴趣可以去看看:
  https://www.npmjs.com/package/connect-history-api-fallback

对了你可以在本地运行一下测试一下，如何可以的话在进行压缩。

运行nodejs#

• 找到项目目录， 也就是vue-server目录， 然后上方输入框内获取焦点， 然后输入cmd， windows 7 可以按 shift+右键
• 输入命令

node app.js

压缩vue-server目录#

后续的文章我会去分享如何在我们服务器上中去安装 nodejs(我的服务器是CentOS7.6) 以及如何把刚刚压缩的文件上传到服务器、并进行部署。以及一些安全问题比如说: DDoS攻击以及解决方案