publicpath vue

vue-cli设置publicPath小记
2020-10-15 10:38:37
主要介绍了vue-cli设置publicPath小记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
收起

Vue CLI4.0 webpack配置属性——publicPath

千次阅读 2020-04-28 17:35:45

用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。默认情况下，Vue CLI 会假设你...

publicPath

Type: string
Default: '/'

官方文档说明：

部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。

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

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，

官方文档解析

看完官方文档是否一脸蒙蔽？

什么是部署应用包时的基本 URL？

什么是域名的根路径？

别急，容我慢慢道来。

首先，我们来看两个字眼：部署、域名

从这两个字眼我们可以推断出， publicPath与服务器有关系了。

什么？你看不出。没关系，看不出，你就默认它有关吧！

项目到部署服务器

当我们完成项目开发要对外开放时，就需要把打包好的项目文件上传到服务器进行部署操作。

流程大致如下:

项目文件打包
服务器安装配置 Web Server 服务器（软件）。如：IIS、Apache(下面，我将默认以Apache进行讲解)
将打包好的项目文件上传到 Web服务器的域名根目录下，Apache 默认为 www 目录

用户访问服务器流程说明：

访问网站我们都很熟悉，无非就是在浏览器输入对应网址就可以访问网址了。

那服务器是如何工作的呢？

简单来说，当 Apache 接收到用户发来的http request 请求时，会自动到 www 目录下寻找对应的资源，然后将用户需要的资源再 Response 响应发送回去。拿官方例子来说，我们有一个对外的网址https://www.my-app.com/ 。用户只要通过这个网址访问我们的服务器，Web 服务器就会自动到 www 目录里获取对应的资源。假设，www 目录有这个test.html 文件。用户要访问这个文件，那么只需要https://www.my-app.com/test.html 就可以访问到了。实际上，就是www/test.html。也就是说，https://www.my-app.com/替代了www/

在这里插入图片描述

假设，www 目录结构现在变成下面这样，我们该这么访问呢?

在这里插入图片描述

访问test.html就变成了：https://www.my-app.com/my-app/test.html

如果test.html 使用pic.jpg 图片。写法就变成：<img src='/my-app/pic.jpg'/>

看到这里，可能就有人满脸疑惑。

src='/my-app/pic.jpg' ？

/my-app/pic.jpg ？？

确定没错？？？

没错！！！

用户从浏览器访问pic.jpg 路径跟访问test.html 一样：https://www.my-app.com/my-app/pic.jpg

test.html 要使用pic.jpg，那必然先得让用户浏览器访问到pic.jpg。这一点，我们可以在任何一个网站可以看到。

一般的，在项目开发中写法应该将src写成：./pic.jpg。这是一种相对路径的写法。但要注意的是，相对路径还有另外两种写法：

关于相对路径的写法，请参考：相对路径的三种写法

使用另外两种写法，应写成：

../my-app/pic.jpg
/my-app/pic.jpg

可能，对于最后一种的写法，大家会存在疑惑。

根目录为什么是 www ?

对于这一点，大家要注意的是这个根目录对应的Apache服务器的域名根目录。

这时，可能就会又有人问了。既然如此，是不是每次部署服务器都要去手动改url？一个项目里有许许多多的url，每次部署都要改，会死人的呀！

当然不能这么麻烦啦！publicPath 就是为此而生的。publicPath设置的就是项目文件根路径相对www的那一部分路径。也就是/my-app/了。设置publicPath 后，项目打包是就会自动在src前面补上publicPath 的值。

如下图：

在这里插入图片描述

打包出来的结果：
在这里插入图片描述

可以看到，在所有的url前都自动补上了/my-app/。

讲了这么多，总之一句话：

publicPath设置的就是域名根目录到项目文件根目录间的url。

一劳永逸的写法：使用当前相对路径写法

在官方文档最后一段话写到，我们可以将publicPath 设置为''或者'./'，这样打出来的包可以被部署在任意路径。

!!!∑(ﾟДﾟノ)ノ

是不是学习到了！哈哈！！！

总结：

publicPath 接收 string 类型的 value；默认值为 '/'（/是根目录）
publicPath 设置的是部署应用包的基本 URL，不是项目打包出来的文件存放的位置。
publicPath 也可以设置为''或者'./'，设置成相对路径后可以任意部署。

文章跳转

上一篇：Vue CLI 4.0 webpack属性讲解以及创建vue.config.js
下一篇：Vue CLI4.0 webpack配置属性——outputDir、assetsDir、indexPath

收起

展开全文

webpack

vue-cli设置publicPath几种方式对比

千次阅读 2020-06-11 09:40:29

publicPath打包设置 1. 不设置(默认为 publicPath: ‘/’) 或者设置 publicPath: '/' // vue.config.js module.exports = { publicPath: '/', } html中被打包的css和js路径如下 <!DOCTYPE html> <...

publicPath打包设置 
1. 不设置(默认为 publicPath: ‘/’) 或者设置 publicPath: '/' 
// vue.config.js
module.exports = {
  publicPath: '/',
}
 
html中被打包的css和js路径如下 
<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=/favicon.ico>
    <title>vue-manage-system-template-js</title>
    <link href=/js/about.62bc742c.js rel=prefetch>
    <link href=/css/app.1d486654.css rel=preload as=style>
    <link href=/css/chunk-vendors.2ac5db4b.css rel=preload as=style>
    <link href=/js/app.a62b0400.js rel=preload as=script>
    <link href=/js/chunk-vendors.7a1d5ffa.js rel=preload as=script>
    <link href=/css/chunk-vendors.2ac5db4b.css rel=stylesheet>
    <link href=/css/app.1d486654.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but vue-manage-system-template-js doesn't work properly without JavaScript enabled. Please
    enable it to continue.</strong></noscript>
<div id=app></div>
<script src=/js/chunk-vendors.7a1d5ffa.js></script>
<script src=/js/app.a62b0400.js></script>
</body>
</html>
 
2. 设置 publicPath: ‘./’ 好处是随处可打开,直接在打包文件夹就可打开html页面 
// vue.config.js
module.exports = {
  publicPath: './',
}
 
html中被打包的css和js路径如下 
<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=favicon.ico>
    <title>vue-manage-system-template-js</title>
    <link href=js/about.62bc742c.js rel=prefetch>
    <link href=css/app.1d486654.css rel=preload as=style>
    <link href=css/chunk-vendors.2ac5db4b.css rel=preload as=style>
    <link href=js/app.a62b0400.js rel=preload as=script>
    <link href=js/chunk-vendors.7a1d5ffa.js rel=preload as=script>
    <link href=css/chunk-vendors.2ac5db4b.css rel=stylesheet>
    <link href=css/app.1d486654.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but vue-manage-system-template-js doesn't work properly without JavaScript enabled. Please
    enable it to continue.</strong></noscript>
<div id=app></div>
<script src=js/chunk-vendors.7a1d5ffa.js></script>
<script src=js/app.a62b0400.js></script>
</body>
</html>
 
3. 设置 publicPath: 'vmst’ 
// vue.config.js
module.exports = {
  publicPath: 'vmst',
}
 
html中被打包的css和js路径如下 
<!DOCTYPE html>
<html lang=en>
<head>
    <meta charset=utf-8>
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <link rel=icon href=vmst/favicon.ico>
    <title>vue-manage-system-template-js</title>
    <link href=vmst/js/about.62bc742c.js rel=prefetch>
    <link href=vmst/css/app.1d486654.css rel=preload as=style>
    <link href=vmst/css/chunk-vendors.2ac5db4b.css rel=preload as=style>
    <link href=vmst/js/app.a62b0400.js rel=preload as=script>
    <link href=vmst/js/chunk-vendors.7a1d5ffa.js rel=preload as=script>
    <link href=vmst/css/chunk-vendors.2ac5db4b.css rel=stylesheet>
    <link href=vmst/css/app.1d486654.css rel=stylesheet>
</head>
<body>
<noscript><strong>We're sorry but vue-manage-system-template-js doesn't work properly without JavaScript enabled. Please
    enable it to continue.</strong></noscript>
<div id=app></div>
<script src=vmst/js/chunk-vendors.7a1d5ffa.js></script>
<script src=vmst/js/app.a62b0400.js></script>
</body>
</html>

收起

展开全文

前端 webpack

vue-cli3.x部署时的publicPath配置

千次阅读 2021-04-23 09:11:08

vue-cli3.x搭建的后台管理项目，由后台统一部署，测试服和正式服的域名都只有一个，但是要部署不同的项目并能正常访问，服务端同事就想通过给域名添加后缀，并且给打包后文件添加相同的路径前缀的方式来区别不同的...

vue-cli3.x 部署
产物中的静态资源文件访问路径添加自定义前缀

vue-cli3.x 搭建的后台管理项目，由后台统一部署，测试服和正式服的域名都只有一个

，但是要部署不同的项目并能正常访问，服务端同事就想通过给域名添加后缀

，并且给打包后文件添加相同的路径前缀的方式来区别不同的项目

eg ：http://xxx.com/project是项目的访问地址

    那访问打包后的产物时路径为：http://xxx.com/project/static
    
    总之就是：服务的域名+你想设置的前缀（前后端保持一致）+静态资源文件路径

前端配合解决的方法如下：
在这里插入图片描述

收起

展开全文

es6

Vue-cli assets SubDirectory及PublicPath区别详解
2020-11-19 16:25:05
近期在参与用vue+ springBoot前后端不分离项目，遇到了前端打包后dist文件放到后台无法运行报404错误，static下的资源都访问不了问题。问题1：我们知道前后端不分离项目，一些静态图片、页面直接放在resource/...
收起
Webpack中publicPath路径问题详解
2020-12-10 03:12:11
最近自己在搭建一个基于webpack的react项目，遇到关于output.publicPath和webpack-dev-server中publicPath的问题，而官方文档对它们的描述也不是很清楚，所以自己研究了下并写下本文记录。 output output选项指定...
收起

webpack/vue-cli 中的 publicPath / 和 ./ 的区别

千次阅读 2020-09-27 00:16:03

webpack/vue-cli 中的 publicPath / 和 ./ 的区别在说这个问题之前，vue-cli 的配置文档已经说的非常清楚了 publicPath 而 webpack 对于 publicPath 的描述相对苍白。但是 vue-cli 对于我们来说也是一个黑盒子，...

webpack/vue-cli 中的 publicPath / 和 ./ 的区别

在说这个问题之前，vue-cli 的配置文档已经说的非常清楚了 publicPath

而 webpack 对于 publicPath 的描述相对苍白。但是 vue-cli 对于我们来说也是一个黑盒子，我们只知道 publicPath 可以配置'',./ 或者 /my-app/ 这种自定义 URL。但是，你真的理解 webpack 里面的 publicPath 吗？

准备环境

nginx 模拟一个真实的 URL 和高仿真项目
webpack 自己写一段 webpack，并且复现对应的场景

（webpack 的配置说复杂也复杂，说简单也简单，如果不想自己从头开始写的，可以从我的一个仓库中直接获取演示代码webpack_config
因为我就是在写这段配置的时候深入研究的 publicPath

PS：如果用我的 webpack 仓库，把代码拉下来后，记得看下是不是在 v0.0.2 分支！

如果对于 nginx 和 webpack 实在太陌生，可以看下后续的描述把~

环境的配置

nginx.conf nginx 配置不复杂，给他分配一个域名，指向 80 端口，指定入口文件，入口文件下可以直接找到 index.html 即可

server {
  listen        80;
  server_name  public_path.com;
  root   "E:/Desktop/publicPathDemo/webpack_config/dist";
  location / {
      index index.html index.php;
      autoindex  on;
      if (!-e $request_filename) {
          rewrite  ^(.*)$  /index.php?s=/$1  last;
          break;
      }
  }
}

修改 host 文件，添加一个域名

127.0.0.1 public_path.com

在准备好的 webpack 项目中，打包一份 dist 文件出来

一切准备就绪，访问 public_path.com

环境准备完毕，开始探究 publicPath

publicPath 使用 ‘/’ 的情况

修改几个地方：

webpack.base.js
- 修改 output.publicPath 为 '/'。
- 修改 MiniCssExtractPlugin.loader 里面的 publicPath 把他注释掉
webpack.dev.js
- 修改 output.publicPath 为 '/'。
webpack.prod.js
- 修改 output.publicPath 为 '/'。
然后运行 npm run build 更新一份打包
运行 npm run serve 运行一份开发环境的情况。打开浏览器的 http://localhost:8080/

圈重点

index.html

css 中图片的资源

localhost 中 css 的情况

更换项目的 URL

所有的资源，前缀都带上了 /。没错，这就是 publicPath 的效果。目前我们测试的域名是 http://public_path.com/ 那假如有一天，老板让我们改一下 URL，需要访问 http://public_path.com/vue/ 才是访问我们当前的页面，你会怎么处理？

熟悉 nginx 的同学应该有答案了，因为域名指向了 /dist/ 文件夹，URL 其实和我们资源管理器是一个道理，我们只需要嵌套文件夹，URL 就能一路找下去，所以我们把项目的文件夹调整下

再次访问 http://public_path.com/ 效果如下：

进入 vue 文件夹内

是 nginx 出错了吗？不是的，是资源路径错了。因为在 index.html 中，我们引入的 JS 资源是 / 开头的，意思就是会无视 URL 的层级，直接从最顶级开始找文件，这当然找不到了

publicPath:’/’ 第一个弊端出现了： 就是迁移项目/遇到 URL 复杂的项目的情况下，很容易就找不到资源

publicPath 使用 ‘./’ 或者 ‘’ 的情况

因为 ./ 和 '' 在打包完成后对于相对路径来说是一个效果，所以我们用相对清晰的./做演示

修改几个地方：

webpack.base.js
- 修改 output.publicPath 为 './'。
- 修改 MiniCssExtractPlugin.loader 里面的 publicPath 把他注释掉
webpack.dev.js
- 修改 output.publicPath 为 './'。
webpack.prod.js
- 修改 output.publicPath 为 './'。
然后运行 npm run build 更新一份打包 (build 的时候会自动清空dist目录，然后重新生成文件)
运行 npm run serve 运行一份开发环境的情况。打开浏览器的 http://localhost:8080/

老规矩，看几个文件：

index.html

css 文件中的资源

localhost 中的情况

localhost 中进入 dist 目录看看

为什么 http://public_path.com/ 的图片不显示了

http://public_path.com/ 项目中，图片没显示，是因为我的 webpack 配置了 css 文件分离，不过我的图片也是分开打包到了assets/images/ 目录下。分离后，图片的引入还是用的相对路径 ./

可以对比一下使用 img 标签引入的图片和 css 引入的图片的路径差别。可以看出 css 引入的图片中，URL 多了一个css

localhost 为啥打开是文件夹目录了?

和 nginx 原理差不多，原先是指向到 dist 文件夹中的，可是配置 publicPath 后，指向的文件夹往上走了一层，所以就可以看到包括 dist 文件夹在内的目录

localhost 中进入 dist

这部分的资源和 http://public_path.com/ 解释是一样的了，因为相对路径的问题，所以多了一层 css

是不是使用 ./ 就会有那么多问题呢？继续看下更换目录的情况

更换项目的 URL

和之前一样，多加一层 vue 文件夹，访问 http://public_path.com/vue/

没错，比起空白页，这个起码更换目录结构，资源还是都可以请求的。因为使用 ./和'' 访问的都是相对路径，并非绝对路径，只要index.html和资源文件夹的相对路径没改变，项目随便迁移。

不信可以在迁移一层：

publicPath:’./'弊端： 如果 webpack 配置了样式分离，尤其是 vue 这种 css 和图片都分开文件夹存放的情况下，特别容易出问题
publicPath:’./'好处： 迁移项目的时候，因为用的都是相对路径，所以不管 URL 怎么变化，基本都能找到相应的资源

能不能 publicPath 在’/‘和’./’ 互相取长补短？

可行性在哪里？

上面的大量截图和 demo，可以看出，publicPath:'./' 就差在了 css 打包的时候，因为 css 分离，多了一层文件夹，而图片也分离了，不在 css 文件夹下才导致的。而 publicPath:'/' 呢，刚好都是让资源直接从根目录开始找。
那么我们只需要解决图片文件和 css 文件夹中的关系，第一个问题就解决了
实际上呢，项目是自己搭建的，css 和图片输出的地方也是我们控制的，我们只需要在处理 css 的图片的时候，处理好publicPth就行，不过也不能直接用 /，因为还是迁移项目的那个问题，我们可以考虑使用 ../ 图片和 css，就差了一层文件夹嵌套！为啥？因为 css 和图片输出的地方也是我们控制的，细细想想，是不是这么个道理？（针对这个 webpack 是这个道理，不同项目，分别讨论~，原理是一样的）

还有一个就是 publicPath:'./' 在本地开发的时候，打开的都是目录，加 /dist/ 访问总觉得的欠妥。
那就用 webpack 的多环境配置，在 dev 环境下还是用 / 保证 localhost 可以正常打开，实际打包的时候在改用 ./

修改配置

webpack.base.js
- 修改 output.publicPath 为 './'。(不过这个影响不大了，因为都会被后面的配置覆盖)
- 修改 MiniCssExtractPlugin.loader 里面的 publicPath 为 ../
webpack.dev.js
- 修改 output.publicPath 为 '/'。
webpack.prod.js
- 修改 output.publicPath 为 './'。

重新打包，重新运行

url 访问：

localhost 访问：

添加 vue 文件夹在访问：

只能说一句：完美~

另外一种 /my-app/ 的场景

开始的时候 vue-cli 的配置还给出了一种 publicPatch 为 /my-app/ 的场景。其实这个场景和我们使用 vue 文件夹的场景特别相似。我们也可以模拟一下。

这种场景什么时候会遇到呢，就是在已经固定的文件夹下再去放项目，比如码云的 gitee pages。目前我的博客就是运行在码云的 gitee pages 上，码云给我分配的链接是 http://jioho.gitee.io/blog/ ，那么这时候我的 publicPath 就需要是 blog了。

改一下文件：

webpack.base.js
- 修改 output.publicPath 为 '/my-app/'。(不过这个影响不大了，因为都会被后面的配置覆盖)
- 修改 MiniCssExtractPlugin.loader 里面的 publicPath 为 /my-app/
webpack.dev.js
- 修改 output.publicPath 为 '/my-app/'。
webpack.prod.js
- 修改 output.publicPath 为 '/my-app/'。

然后重新运行和重新打包，看下效果：

index.html 不出所料，就是把 /my-app/加在前面了。所以 css 资源和图片资源也不例外

既然指定了前缀，那使用本地开发的时候也是少不了需要添加 /my-app/

包括我在写自己博客本地预览的时候，vuepress 一样会把blog帮我带上

像这种情况呢，nginx 可能会做一些反向代理，或者重定向之类的操作_{倒不是说不会写这部分配置，只是已经超出今天讨论的范围，配置我就不去调试了}

像这种平台原先指定好了 /my-app/ 前缀让你部署一个项目的话，其实用 './'+css 资源使用 '../' 的这套方式可以打遍天下~前提是这个 webpack 是你自己搭建的，如果用的还是 vue-cli 或者像我一样在用 vuepress 没有自己去搭自己的 webpack，那就只能把 publicPath 传进去让程序内部处理了~

总结一下

publicPath 的 3 种情况

./ 或者留空的情况

好处：可以部署到任意域名下，因为用的相对路径，只要整个项目迁移，就不会出问题
弊端：前提是这套脚手架/webpack 能支持 ./ 这种情况，如果遇到常见的 css 分离，image 文件夹单独分离的情况，那就得看内部处理了，我想 vue-cli 也是和我的处理方式差不多把，毕竟打包后的资源放哪里，都是 vue-cli 说了算~

/ 的情况

好处：不用考虑太多资源性的问题，基本上打包出去后都能从根目录开始查找，webpack 打包后资源多数也是从支持根目录开始找
弊端：项目迁移的时候就 GG 了，必须部署在域名，紧跟着 .com/.cn … 后面，不能在多插入任何的路由前缀

自定义 .com 后面的域名

这个谈不上好处和弊端，因为这是平台的限制，无法突破，只能服从 😃

我的原文博客地址，点一下提高一下SEO收录，感谢感谢~ webpack/vue-cli 中的 publicPath / 和 ./ 的区别

收起

展开全文

webpack

转载- vue-cli设置publicPath小记
2020-06-09 01:41:23
这篇真的写的很好。直接转了。 https://www.jb51.net/article/184694.htm
收起
vue 设置斜杠 , 不架在根路径，配置 publicPath & base
千次阅读 2020-06-18 19:09:13
vue.config.js 是否为生产环境 const isProduction = process.env.NODE_ENV !== 'development' 配置 publicPath module.exports = { publicPath: isProduction ? 'portal' : '/' }
收起
新版Vue项目配置项目名称-publicPath-前端_v1.0.2
千次阅读 2020-06-18 14:55:36
新版Vue项目配置项目名称-publicPath-前端 v1.0.0 学生宫布 8416837 webpack 4.28.4 文章目录js配置 js配置 vue.config.js module.exports = { publicPath: process.env.NODE_ENV === "production" ? "/ui-pro...
收起
vuejs 部署
Vue config里配置publicPath之后proxy的配置修改
2021-08-18 15:30:27
publicPath: '/myProject', devServer: { disableHostCheck: true, //webpack4.0 开启热更新 proxy: { '/localApi': { target: 'http://ip:port/api/', changeOrigin: true, pathRewrite: { '/myProject/...
收起
vue打包时的publicPath，就是打包后静态资源的路径
千次阅读 2021-03-02 16:29:58
当不配置vue.config.js或者没有publicPath属性时，默认访问的静态路径是服务器的根目录服务器根目录下没有js文件夹所以访问失败，把dist下的js,css等静态文件剪切到wamp/www目录下就可以正常访问了（注意重启wamp...
收起
Vue中动态设置publicPath或axios.defaults.baseURL
2021-10-27 15:52:41
有时候需要动态配置vue.config.js中的publicPath。新建public/config.js文件代码如下： prod_config.publicPath = './' 在index.html文件引入 <body> <div id="app"></div> <script type...
收起
webpack 前端
vue-cli如何正确设置publicPath保证打包部署后静态资源路径正确的问题
千次阅读 2021-07-23 09:05:24
我们是放在这个目录下的根目录还是在这个目录下的一个文件夹内，都需要前端正确设置publicPath才能正确访问的。打包后的文件目录： ├─dist ├─css ├─img └─js index.html 一、不设置publicPath时，既...
收起
Nginx: Vue路由history模式下，publicPath配置为子目录时，页面刷新报404错误
千次阅读 2020-01-14 18:47:08
今天在部署项目时遇到的问题，在网上都找不到解决方法（或许自己没找对），所以自己捣鼓了下，测试加分析定位bug，最后总算解决了，所以要记录一下。 1. 问题描述 ...publicPath：配置为 /some/path/ （v...
收起
Nginx配置路由配置
vue-router的base和vue.config.js的publicPath区别和联系
千次阅读 2021-11-17 09:47:10
vue-router的base和vue.config.js的publicPath区别和联系 vue-router的base官方文档解释： base 类型: string 默认值: "/" 应用的基路径。例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/...
收起
javascript jquery 前端
vuecli3打包部署非根目录下配置vue.config.js publicPath
千次阅读 2020-01-07 13:49:21
从 Vue CLI 3.3 起已弃用baseUrl，请使用publicPath。默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这...
收起
javascript
HTML5 History 模式使用时Vue的publicPath配置（404问题）
千次阅读 2021-11-17 18:07:02
相对 publicPath 的限制相对路径的 publicPath 有一些使用上的限制。在以下情况下，应当避免使用相对 publicPath: 当使用基于 HTML5 history.pushState 的路由时；当使用 pages 选项构建多页面应用时。如果你在...
收起
nginx docker 运维
vue.config.js publicPath "./" npm run build无效的原因
千次阅读 2019-10-05 05:20:10
outputDir assetsDir indexPath必须填 module.exports = { ... publicPath: process.env.NODE_ENV === 'production' ? './' : '/', outputDir: "dist", assetsDir:"static", indexPath:'index....
收起
vue访问public路径
千次阅读 2020-04-30 17:11:39
publicPath: process.env.BASE_URL,  <a :href='`${publicPath}view/djb_detail.html`' > </a>
收起
(三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串 & 在public中添加...
千次阅读 2020-03-14 01:37:45
vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuilderX的打包配置文件manifest.json 文件一、如果需要发布移动App，则在 public 中添加 manifest.json 文件参考文档：...
收起
js android
webpack中的publicPath路径问题（output和DevServer中的publicPath的作用）
千次阅读 2018-05-08 19:42:43
在webpack的配置文件中，output和devServer中都可以设置一个publicPath属性，那么两者的作用有什么不同呢？嗯、稍微的分析一下1、publicPath在output属性里面，设置的其实是一个基础的路径，它会为我们所有的资源都...
收起
webpack
vue@cli3项目模板怎么使用public目录下的静态文件
2020-10-15 03:54:37
主要介绍了vue@cli3项目模板怎么使用public目录下的静态文件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
收起
ERROR Invalid options in vue.config.js: "publicPath" is not allowed
千次阅读 2019-10-11 11:35:23
刚从远程clone下来的代码，npm run dev... ERROR Invalid options in vue.config.js: "publicPath" is not allowed npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! iview-admin@2.0.0 dev: `vue-cli-service s...
收起
baseUrl
vue-cli3 资源路径publicPath配置成 ./ 和 / 的天大区别，net::ERR_ABORTED 404 (Not Found)，导致线上项目...
2021-01-04 13:55:22
vue.config.js里的publicPath配置成./和/有什么区别呢?以我实际项目中遇到的问题来说明。我项目中遇到的问题是： 1.线上项目部分路由跳转的时候控制台报错，出现资源加载错误net::ERR_ABORTED 404 (Not Found)，...
收起
vue-cli3.0使用prerender-spa-plugin插件预渲染时 publicpath的配置问题
2019-09-29 11:23:50
按照网上搜寻到的办法配置预渲染 : **vue.config.js**: ``` // 这三项一定要有，因为下面configureWebpack中用到了 ...const PrerenderSPAPlugin = require('prerender-spa-plugin'...求教如何正确配置 publicPath
收起
chrome javascript
vue2 编译错误"publicPath" is not allowed
千次阅读 2019-02-21 16:09:00
Invalid options in vue.config.js: "publicPath" is not allowed //码云仓库路径 https://gitee.com/codcoe/blog publicPath: process.env.NODE_ENV === 'production'?'/blog/':'/', 二、解决方案： ...
收起
vue学习笔记五：在vue项目里面使用引入公共方法详解
2020-10-17 05:30:01
主要介绍了在vue项目里面使用引入公共方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
收起

vue-cli设置publicPath小记

Vue CLI4.0 webpack配置属性——publicPath

publicPath

官方文档说明：

官方文档解析

项目到部署服务器

用户访问服务器流程说明：

一劳永逸的写法：使用当前相对路径写法

总结：

文章跳转

vue-cli设置publicPath几种方式对比

publicPath打包设置

vue-cli3.x部署时的publicPath配置

Vue-cli assets SubDirectory及PublicPath区别详解

Webpack中publicPath路径问题详解

webpack/vue-cli 中的 publicPath / 和 ./ 的区别

webpack/vue-cli 中的 publicPath / 和 ./ 的区别

准备环境

环境的配置

publicPath 使用 ‘/’ 的情况

圈重点

更换项目的 URL

publicPath 使用 ‘./’ 或者 ‘’ 的情况

为什么 http://public_path.com/ 的图片不显示了

localhost 为啥打开是文件夹目录了?

localhost 中 进入 dist

更换项目的 URL

能不能 publicPath 在’/‘和’./’ 互相取长补短？

可行性在哪里？

修改配置

另外一种 /my-app/ 的场景

总结一下

./ 或者 留空的情况

/ 的情况

自定义 .com 后面的域名

转载- vue-cli设置publicPath小记

vue 设置斜杠 , 不架在根路径，配置 publicPath & base

新版Vue项目配置项目名称-publicPath-前端_v1.0.2

Vue config里配置publicPath之后proxy的配置修改

vue打包时的publicPath，就是打包后静态资源的路径

Vue中动态设置publicPath或axios.defaults.baseURL

vue-cli如何正确设置publicPath保证打包部署后静态资源路径正确的问题

Nginx: Vue路由history模式下，publicPath配置为子目录时，页面刷新报404错误

vue-router的base和vue.config.js的publicPath区别和联系

vuecli3打包部署 非根目录下 配置vue.config.js publicPath

HTML5 History 模式使用时Vue的publicPath配置（404问题）

vue.config.js publicPath "./" npm run build无效的原因

vue访问public路径

(三)01 -Vue项目打包发布移动App——vue.config.js中配置相对路径publicPath为空字符串 & 在public中添加...

webpack中的publicPath路径问题（output和DevServer中的publicPath的作用）

vue@cli3项目模板怎么使用public目录下的静态文件

ERROR Invalid options in vue.config.js: "publicPath" is not allowed

vue-cli3 资源路径publicPath配置成 ./ 和 / 的天大区别，net::ERR_ABORTED 404 (Not Found)，导致线上项目...

vue-cli3.0使用prerender-spa-plugin插件预渲染时 publicpath的配置问题

vue2 编译错误"publicPath" is not allowed

vue学习笔记五：在vue项目里面使用引入公共方法详解

publicpathvue

localhost 中进入 dist

./ 或者留空的情况

vuecli3打包部署非根目录下配置vue.config.js publicPath