history模式下Vue项目如何打包部署？

本教程讲解的是 vue-router 中 history 模式的部署，完全适用于 vue-cli3,4。vue-cli2 需要进行略微改动。

前提准备

我们需要准备一个 vue 项目（vue-cli3 或 vue-cli4）、一个 nginx 服务器。

部署流程

1. 配置 vue.config.js 中的publicPath
2. 配置 vue-router 的模式为history
3. 配置 vue-router 中的base（基态路由【与服务端配合】）
4. 使用npm run build生成 dist 文件夹
5. 配置 nginx 代理（进行生产环境下的反向代理，注意生产环境下devServer无效【或者你可以配置devserver的根目录是 dist 都可以】）
6. 配置 nginx 路由

vue.config.js

如果你的项目中没有这个文件，直接在项目根目录创建它即可。

配置 publicPath

这里我们配置publicPth为路由/vue/：

module.exports = {
    // /vue/这个名字你自己起，也可以用我这个
    publicPath: process.env.NODE_ENV === "production" ? "/vue/" : "/",
    outputDir:'dist',
}

注意：为了兼容各种情况，我强烈建议大家路由写成/vue/而不是写成/vue。

vue-router

配置路由模式和基础路由

export default new Router({
    // history 模式，需要和服务端配合才能在生产环境下正常使用
    mode: 'history',
    // 基本路由，这个名字可以自己起，但是要注意和 vue.config.js 里面 publicPath 所起的名字一致
	base:'/vue/',
    routes:[]
})

npm run build

我们在 vue 项目根目录下运行npm run build就可以进行项目的打包了。打包后会生成 dist 文件夹，把它放进 nginx 的 html 文件夹下即可。

nginx

1.配置 nginx 代理

有些时候我们需要请求一些跨域服务，在开发时，我们可以配置devServer的proxy实现跨域访问。

但是在npm run build后，我们会发现代理无效。这是因为生产环境下的文件已经脱离devServer了，所以自然代理就没有用了，所以一般生产环境代理我们使用 nginx 去做。

location /api/{
    proxy_pass  http://192.136.21.1:6600/;
    index  index.html index.htm;
}

location /info/{
    proxy_pass  https://mybj123.com/;
    index  index.html index.htm;
}

假设我们的nginx服务器的端口号是 8080，那么我们做跨域请求时候只需要访问：localhost:8080/api就行了，这样做我们就相当于访问那个服务器下的资源。

但是一般部署项目的时候我们不会发送 axios 去请求localhost:8080/api，我们会直接请求/api。

举个例子：

//不会这样做，因为部署服务器后地址要换成 ip，不然会 404
axios.get("localhost:8080/api")
//你可以选择这样做，但是我们不推荐
axios.get("ip:8080/api")
//我们推荐这样做，让 axios 根据相对路径补全 ip+端口，
//这样比较省心【但是要注意你的项目要部署在 nginx 代理服务器下。
//如果你不部署的话相对路径也是不行的，毕竟你都没部署人家 nginx 服务器上，
//自然你的项目就不是 nginx 家的孩子，所以相对路径的小名，nginx 怎么能认识呢？】
axios.get("/api")

2.配置 nginx 路由

location / {
    root   html;
    index  index.html index.htm;
    autoindex on;       #开启 nginx 目录浏览功能
    autoindex_exact_size off;   #文件大小从 KB 开始显示
    charset utf-8;          #显示中文
}
# 写我们的路由暗号/vue
location /vue{
    # alias 后面写项目所在目录 xxxxxxx 一定要注意，不能写成 D:\nginx\nginx-1.20.0\html\dist，要写成斜杠/形式，否则会 404
    alias D:/nginx/nginx-1.20.0/html/dist;
    charset utf-8;          #显示中文
}

现在启动 nginx 服务器输入localhost:8080/vue就可以访问我们的 vue 项目了。

就是这么简单，你学会了吗？

以上关于history模式下Vue项目如何打包部署？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。