vue history 模式打包部署在域名的二级目录的配置指南


Posted in Javascript onJuly 02, 2019

最近在做项目,需要把项目部署在域名下的二级目录,并且是在用vue-routerhistory 模式。

我们都知道vue-router 的两种前端基本访问模式 hash 和history 。hash 模式后面带#,打包的时候只需要把绝对路径(/)换成相对对路径(./),就可以部署在任何地方,不需要服务器配合,但是不好看,所以我们一般选择history 模式,但是history 模式需要配合服务器的部署。

本文主要是在vue-cli3版本下,对部署在域名的二级目录下做四处的配置:

1. vue-router 路由的文件的配置,根据自己部署的二级目录填写 

export default new VueRouter({
 mode:"history",
  base:"/web",

2.在vue.config.js配置文件(如果没有新建一个,项目根目录下)

 注意: baseUrl 从 Vue CLI 3.3 起已弃用,请使用publicPath。

module.exports = {
publicPath:"/web"
}

3.在入口文件中index.html 的head 标签内加入 

 <meta base ="/web/">

4.最后就是部署配置,以nginx 为例

 

server {
 listen 80;
 server_name localhost;
 root /home/wwwroot/;
 location /web {
  try_files $uri $uri/ /web/index.html;
 }
}

到此,配置和部署已经完成了,将打包好的前端静态资源放在域名指定的根目录下的二级(多级目录配置同上)录即可,

注意,以上配置是针对在history模式,部署在域名下的二级目录以上的 配置,hash 模式 和 history 模式部署在域名根目录不需要那么多配置。

本人测试过部署过,只要按照以上配置四个地方,完全没有问题,但是有不对之处,还请大家指出,谢谢....

总结

以上所述是小编给大家介绍的vue history 模式打包部署在域名的二级目录的配置指南,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
jquery键盘事件介绍
Jan 31 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
详解JS面向对象编程
Jan 24 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
laydate 显示结束时间不小于开始时间的实例
Aug 11 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 Javascript
简单了解微信小程序的目录结构
Jul 01 #Javascript
vue如何实现自定义底部菜单栏
Jul 01 #Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 #Javascript
vue中的面包屑导航组件实例代码
Jul 01 #Javascript
Vue动态面包屑功能的实现方法
Jul 01 #Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 #Javascript
基于Vue SEO的四种方案(小结)
Jul 01 #Javascript
You might like
也谈 PHP 和 MYSQL
2006/10/09 PHP
图书管理程序(二)
2006/10/09 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
由浅到深了解JavaScript类
2006/09/08 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
详解如何使用webpack在vue项目中写jsx语法
2017/11/08 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
Python闭包函数定义与用法分析
2018/07/20 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
HTML5 canvas实现的静态循环滚动播放弹幕
2021/01/05 HTML / CSS
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
客户代表自我评价范例
2013/09/24 职场文书
历史学专业个人的自我评价
2013/10/13 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
调解协议书
2014/04/16 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
关于mysql中string和number的转换问题
2022/06/14 MySQL