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代理

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

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

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

location /info/{
    proxy_pass  http://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项目了。

就是这么简单,你学会了吗?

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » history模式下Vue项目如何打包部署?

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们