全部
常见问题
产品动态
精选推荐

vue中的publicPath讲解

管理 管理 编辑 删除

1,publicPath

publicPath是部署应用包时的基本 URL;默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 publicPath 为 /my-app/。

这个值也可以被设置为空字符串 (‘’) 或是相对路径 (‘./’),这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径;但相对路径的 publicPath 有一些使用上的限制。在以下情况下,应当避免使用相对 publicPath:

  • 当使用基于 HTML5 history.pushState 的路由时;
  • 当使用 pages 选项构建多页面应用时。

2,哪里会用到publicPath

在vue中的项目中一般静态文件路径要使用publicPath 和项目打包部署时都会用到publicPath;

2.1 静态文件使用publicPath

如果你的项目里面的静态文件都放在public文件中,那么使用的时候要使用publicPath这个变量,防止打包后静态文件找不到;

你需要通过绝对路径来引用它们。因为:任何放置在 public 文件夹的静态资源都会被简单的复制,而不经过 webpack;

下图是vue-cli官网给出的使用说明:链接

注意:这里用到了process.env.BASE_URL;下面会解释的

4a631202303031812171848.png

2.2 项目打包使用publicPath

如果你想把开发服务器架设在根路径,你可以使用一个条件式的值:

这里判断是否是生产环境 如果是那么前面的部署路径加上 /app/;如果不是 默认使用根路径 / ;
生产环境经常配合前端服务器的中nginx代理使用;

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/app/' : '/'
}

3,publicPath和process.env.BASE_URL

1,如果你在vue.config.js里面设置了publicPath:

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/video/' : '/',
}

那么process.env.BASE_URL 其实就是 publicPath;不信你可以在组件中console.log(process.env.BASE_URL)打印出来;

BASE_URL会被vue.config.js中 publicPath变量覆盖。

2,如果没有在vue.config.js里面设置publicPath;那么process.env.BASE_URL默认就是根路径 :/ ;

3,在vue路由的配置项中也会用到process.env.BASE_URL:

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
})

mode history 代表路由不再显示#,会像如下形式:localhost:8080/user/list;
主要是base属性 代表着是基本的路由请求的路径:

如:base: ‘/app/’
说明项目部署在app目录下,那么vue所有的路由前面都会自动加上: /app

原文链接: https://blog.csdn.net/qq_43886365/article/details/128372030

CRMEB-慕白寒窗雪 最后编辑于2023-03-03 18:14:08

快捷回复
回复({{post_count}}) {{!is_user ? '我的回复' :'全部回复'}}
回复从新到旧

{{item.user_info.nickname ? item.user_info.nickname : item.user_name}} 作者 管理员 企业

{{item.floor}}# 同步到gitee 已同步到gitee {{item.is_suggest==1? '取消推荐': '推荐'}}
{{item.floor}}#
{{item.user_info.title}}
附件

{{itemf.name}}

{{item.created_at}}  {{item.ip_address}}
{{item.like_count}}
{{item.showReply ? '取消回复' : '回复'}}
删除
回复
回复

{{itemc.user_info.nickname}}

{{itemc.user_name}}

作者 管理员 企业

回复 {{itemc.comment_user_info.nickname}}

附件

{{itemf.name}}

{{itemc.created_at}}   {{itemc.ip_address}}
{{itemc.like_count}}
{{itemc.showReply ? '取消回复' : '回复'}}
删除
回复
回复
查看更多
回复
回复
1868
{{like_count}}
{{collect_count}}
添加回复 ({{post_count}})

相关推荐

CRMEB-慕白寒窗雪 作者
社区运营专员---高冷のBoy | 呆萌のGirl

回答

1102

发布

1750

经验

39810

快速安全登录

使用微信扫码登录
{{item.label}} {{item.label}} {{item.label}} 板块推荐 常见问题 产品动态 精选推荐 首页头条 首页动态 首页推荐
加精
取 消 确 定
回复
回复
问题:
问题自动获取的帖子内容,不准确时需要手动修改. [获取答案]
答案:
提交
bug 需求 取 消 确 定

快速安全登录

使用微信扫码登录

手机登录

{{codeText}}
{{isQrcode ? '手机登录' : '扫码登录'}}
CRMEB客服

CRMEB咨询热线 咨询热线

400-8888-794

微信扫码咨询

CRMEB开源商城下载 开源下载 CRMEB官方论坛 帮助文档
返回顶部 返回顶部
CRMEB客服