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 读取和设置文档元素的样式属性
Apr 14 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 Javascript
Node.js操作redis实现添加查询功能
May 25 Javascript
JS 60秒后重新发送验证码的实例讲解
Jul 26 Javascript
浅析node.js的模块加载机制
May 25 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
在vue中实现给每个页面顶部设置title
Jul 29 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结合ACCESS的跨库查询功能
2015/06/12 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
2013/04/26 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
javascript中this关键字详解
2016/12/12 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
解决JS表单验证只有第一个IF起作用的问题
2018/12/04 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python新手在作用域方面经常容易碰到的问题
2015/04/03 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
python抓取百度首页的方法
2015/05/19 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
Python实现的计数排序算法示例
2017/11/29 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
《植物妈妈有办法》教学反思
2014/02/25 职场文书
婚假请假条怎么写
2014/04/10 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
地道战观后感300字
2015/06/04 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
八年级作文之感恩
2019/11/22 职场文书