精华内容
下载资源
问答
  • 主要介绍了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与服务器有关系了。

    什么?你看不出。没关系,看不出,你就默认它有关吧!

    项目到部署服务器

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

    流程大致如下:

    1. 项目文件打包
    2. 服务器安装配置 Web Server 服务器(软件)。如:IIS、Apache(下面,我将默认以Apache进行讲解)
    3. 将打包好的项目文件上传到 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设置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>
    
    展开全文
  • 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
        
        总之就是:服务的域名+你想设置的前缀(前后端保持一致)+静态资源文件路径
    

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

    展开全文
  • 近期在参与用vue+ springBoot前后端不分离项目,遇到了前端打包后dist文件放到后台无法运行报404错误,static下的资源都访问不了问题。 问题1:我们知道前后端不分离项目,一些静态图片、页面直接放在resource/...
  • 最近自己在搭建一个基于webpack的react项目,遇到关于output.publicPath和webpack-dev-server中publicPath的问题,而官方文档对它们的描述也不是很清楚,所以自己研究了下并写下本文记录。 output output选项指定...
  • 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 / 和 ./ 的区别

    展开全文
  • 这篇真的写的很好。直接转了。 https://www.jb51.net/article/184694.htm
  • vue.config.js 是否为生产环境 const isProduction = process.env.NODE_ENV !== 'development' 配置 publicPath module.exports = { publicPath: isProduction ? 'portal' : '/' }
  • 新版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...
  • publicPath: '/myProject', devServer: { disableHostCheck: true, //webpack4.0 开启热更新 proxy: { '/localApi': { target: 'http://ip:port/api/', changeOrigin: true, pathRewrite: { '/myProject/...
  • 当不配置vue.config.js或者没有publicPath属性时,默认访问的静态路径是服务器的根目录 服务器根目录下没有js文件夹所以访问失败,把dist下的js,css等静态文件剪切到wamp/www目录下就可以正常访问了(注意重启wamp...
  • 有时候需要动态配置vue.config.js中的publicPath。 新建public/config.js文件 代码如下: prod_config.publicPath = './' 在index.html文件引入 <body> <div id="app"></div> <script type...
  • 我们是放在这个目录下的根目录还是在这个目录下的一个文件夹内,都需要前端正确设置publicPath才能正确访问的。 打包后的文件目录: ├─dist ├─css ├─img └─js index.html 一、不设置publicPath时,既...
  • 今天在部署项目时遇到的问题,在网上都找不到解决方法(或许自己没找对),所以自己捣鼓了下,测试加分析定位bug,最后总算解决了,所以要记录一下。 1. 问题描述 ...publicPath:配置为 /some/path/ (v...
  • vue-router的base和vue.config.js的publicPath区别和联系   vue-router的base官方文档解释: base 类型: string 默认值: "/" 应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/...
  • Vue CLI 3.3 起已弃用baseUrl,请使用publicPath。 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上,例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这...
  • 相对 publicPath 的限制 相对路径的 publicPath 有一些使用上的限制。在以下情况下,应当避免使用相对 publicPath: 当使用基于 HTML5 history.pushState 的路由时; 当使用 pages 选项构建多页面应用时。 如果你在...
  • 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>
  • vue.config.js文件中配置相对路径publicPath为空字符串 & 在 public中添加HBuilderX的打包配置文件manifest.json 文件 一、 如果需要发布移动App,则在 public 中添加 manifest.json 文件 参考文档:...
  • 在webpack的配置文件中,output和devServer中都可以设置一个publicPath属性,那么两者的作用有什么不同呢?嗯、稍微的分析一下1、publicPath在output属性里面,设置的其实是一个基础的路径,它会为我们所有的资源都...
  • 主要介绍了vue@cli3项目模板怎么使用public目录下的静态文件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 刚从远程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...
  • vue.config.js里的publicPath配置成./和/有什么区别呢?以我实际项目中遇到的问题来说明。 我项目中遇到的问题是: 1.线上项目部分路由跳转的时候控制台报错,出现资源加载错误net::ERR_ABORTED 404 (Not Found),...
  • 按照网上搜寻到的办法 配置预渲染 : **vue.config.js**: ``` // 这三项一定要有,因为下面configureWebpack中用到了 ...const PrerenderSPAPlugin = require('prerender-spa-plugin'...求教如何正确配置 publicPath
  • 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项目里面使用引入公共方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,457
精华内容 10,982
关键字:

publicpathvue

vue 订阅