Vue-cli打包后部署到子目录下的路径问题说明
更新时间：2020年09月02日 08:39:15 作者：ryy6293
这篇文章主要介绍了Vue-cli打包后部署到子目录下的路径问题说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
默认情况下以当前域名为根目录向下访问。
举例，若需要部署到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打包后部署到子目录下的路径问题说明就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了vuejs使用$emit和$on进行组件之间的传值的示例，具有一定的参考价值，有兴趣的可以了解一下2017-10-10
vue-quill-editor+plupload富文本编辑器实例详解
这篇文章主要介绍了vue-quill-editor+plupload富文本编辑器实例详解,需要的朋友可以参考下2018-10-10
这篇文章介绍了Vue中的event对象，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
在前端开发中,我们经常需要将Markdown格式的文本渲染成HTML并展示在页面上,同时还希望能够对代码块进行高亮显示,今天我将分享一段代码,通过Vue指令实现了这个功能,需要的朋友可以参考下2023-09-09
typescript 为 javaScript的超集，这意味着它支持所有都JavaScript都语法。这篇文章主要介绍了vue框架中props的typescript用法,需要的朋友可以参考下2020-02-02
这篇文章主要为大家分享了Map.vue基于百度地图组件重构笔记，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
Element UI 上传组件实现文件上传并附带额外参数功能
在使用 ElementUI 的上传组件 el-upload 实现文件上传功能时,如果单文件上传是比较简单的,但是在实际需求中,往往会在上传文件时伴随着一些其他参数,怎么操作呢,下面通过示例代码讲解感兴趣的朋友一起看看吧2023-08-08
TinyMCE 是一款功能强大的富文本编辑器,广泛应用于各种 Web 应用中,本文将详细介绍如何在 Vue 项目中集成 TinyMCE,通过详尽的步骤说明、示例代码展示以及丰富的配置选项,助力开发者轻松实现内容编辑的增强与美化,需要的朋友可以参考下2024-11-11
这篇文章主要介绍了vue中如何配置proxy代理问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了Vue方法与事件处理器，,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论