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自动生成包含数字与字符的随机字符串
Feb 09 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
详解如何实现一个简单的 vuex
Feb 10 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
解读Vue组件注册方式
May 15 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
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
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
javascript中对对层的控制
2006/12/29 Javascript
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
学习jQuey中的return false
2015/12/18 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
Python中分数的相关使用教程
2015/03/30 Python
python获取交互式ssh shell的方法
2019/02/14 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
阿迪达斯意大利在线商店:adidas意大利
2016/09/19 全球购物
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
金士达面试非笔试
2012/03/14 面试题
商务邀请函范文
2014/01/14 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
科技节口号
2014/06/19 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
钳工实训报告总结
2014/11/04 职场文书
实习班主任自我评价
2015/03/11 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
高一军训口号
2015/12/25 职场文书