Vue-cli打包后部署到子目录下的路径问题说明


Posted in Javascript onSeptember 02, 2020

默认情况下以当前域名为根目录向下访问。

举例,若需要部署到www.***.com/catalog1/catalog2/下,需要更改

1、config/index.js文件中,build下assetsPublicPath属性为'/catalog1/catalog2/',如下:

build: {

assetsPublicPath: '/catalog1/catalog2/',

默认情况下该值为'/'(该属性目测是webpack打包时的文件引用路径的基础路径)。

2、修改路由base属性为'/catalog1/catalog2/',如下:

export default new Router({
 mode: 'history',
 base: '/catalog1/catalog2/',
 routes: [
 {
 path: '/',
 name: 'indexContent',
 component: indexContent
 }
 ]
})

其中mode设置为'history'可清除路径中的#(本地测试有效)。

设置完成后重新打包。

补充知识:vue-cli打包并配合nginx域名二级子目录

可以修改三个配置

1.路由

const route = new Router({
mode : 'history',
base: '/admin/',
routes:[]
})

2.打包文件 config/index.js

build设置

assetsPublicPath: '/admin/',

3.nginx配置

try_files $uri $uri/ /admin/index.html;

4.项目目录配置实例

项目路径 web/admin/index.html

以上这篇Vue-cli打包后部署到子目录下的路径问题说明就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
PHP守护进程实例
Mar 06 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
小程序实现录音上传功能
Nov 22 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
Jquery $.map使用方法实例详解
Sep 01 #jQuery
JQuery基于FormData异步提交数据文件
Sep 01 #jQuery
vue实现路由懒加载的3种方法示例
Sep 01 #Javascript
JQuery使用数组遍历跳出each循环
Sep 01 #jQuery
vue+echarts实现动态折线图的方法与注意
Sep 01 #Javascript
node.js 如何监视文件变化
Sep 01 #Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 #jQuery
You might like
php中批量替换文件名的实现代码
2011/07/20 PHP
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
php实现cc攻击防御和防止快速刷新页面示例
2014/02/13 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
PyQt5每天必学之组合框
2018/04/20 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
python3+PyQt5泛型委托详解
2018/04/24 Python
python八皇后问题的解决方法
2018/09/27 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
python中删除某个元素的方法解析
2019/11/05 Python
Python协程 yield与协程greenlet简单用法示例
2019/11/22 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
Python 内存管理机制全面分析
2021/01/16 Python
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
new修饰符是起什么作用
2015/06/28 面试题
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
婚礼新人答谢词
2015/01/04 职场文书