vue打包、vue的history、WEB服务搭建

本文主要是介绍vue打包、vue的history、WEB服务搭建，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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是不会吧nodemodules目录放上去的，就是因为有这个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攻击以及解决方案

这篇关于vue打包、vue的history、WEB服务搭建的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！