vue-cli设置publicPath路径格式

最新推荐文章于 2024-03-05 11:07:49 发布
最新推荐文章于 2024-03-05 11:07:49 发布
阅读量1.6k 收藏 5
点赞数 1
分类专栏： Vue2.x 文章标签： vue.js 前端 javascript
原文链接：https://www.jb51.net/article/184694.htm
版权

Vue CLI publicPath 部署 请求路径 部署策略
关键词由CSDN通过智能技术生成

这篇文章主要介绍了vue-cli设置publicPath小记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值

几种设置publicPath后，再对比打包后的index.html文件

测试背景：
每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录
部署的时候，是部署在服务器的一个/test文件夹下

打包后的文件目录：

├─dist
 ├─css
 ├─img
 └─js
 index.html

一、不设置publicPath时，部署后请求路径：

http://111.222.333.444:8888/css/app.0b79487b.css

// vue.config.js

module.exports = {
  // publicPath: '',
}

<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=/css/app.0b79487b.css rel=preload as=style>
  <link href=/js/app.ba2d9b8a.js rel=preload as=script>
  <link href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=/js/chunk-vendors.e7ac9ff2.js></script>
<script src=/js/app.ba2d9b8a.js></script>
</body>
</html>

二、设置为/时，部署后请求路径：

http://111.222.333.444:8888/css/app.0b79487b.css

// vue.config.js

module.exports = {
  publicPath: '/',
}



<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=/css/app.0b79487b.css rel=preload as=style>
  <link href=/js/app.ba2d9b8a.js rel=preload as=script>
  <link href=/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=/js/chunk-vendors.e7ac9ff2.js></script>
<script src=/js/app.ba2d9b8a.js></script>
</body>
</html>

三、设置为./时，部署后请求路径：

http://111.222.333.444:8888/test/css/app.0b79487b.css

// vue.config.js

module.exports = {
  publicPath: './',
}



<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=css/app.0b79487b.css rel=preload as=style>
  <link href=js/app.8569d42d.js rel=preload as=script>
  <link href=js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=js/chunk-vendors.e7ac9ff2.js></script>
<script src=js/app.8569d42d.js></script>
</body>
</html>

四、设置为static时，部署后请求路径：

http://111.222.333.444:8888/test/static/css/app.0b79487b.css

// vue.config.js

module.exports = {
  publicPath: 'static',
}



<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=static/css/app.0b79487b.css rel=preload as=style>
  <link href=static/js/app.d0717808.js rel=preload as=script>
  <link href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=static/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=static/js/chunk-vendors.e7ac9ff2.js></script>
<script src=static/js/app.d0717808.js></script>
</body>
</html>

五、设置为./static时，部署后请求路径：

http://111.222.333.444:8888/test/static/css/app.0b79487b.css

// vue.config.js

module.exports = {
  publicPath: './static',
}



<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=static/css/app.0b79487b.css rel=preload as=style>
  <link href=static/js/app.d0717808.js rel=preload as=script>
  <link href=static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=static/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=static/js/chunk-vendors.e7ac9ff2.js></script>
<script src=static/js/app.d0717808.js></script>
</body>
</html>

六、设置为…/static时，部署后请求路径：

http://111.222.333.444:8888/static/css/app.0b79487b.css

// vue.config.js

module.exports = {
  publicPath: '../static',
}



<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=../static/css/app.0b79487b.css rel=preload as=style>
  <link href=../static/js/app.695b7ccc.js rel=preload as=script>
  <link href=../static/js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=../static/css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=../static/js/chunk-vendors.e7ac9ff2.js></script>
<script src=../static/js/app.695b7ccc.js></script>
</body>
</html>

七、设置为…/时，部署后请求路径：

http://111.222.333.444:8888/css/app.0b79487b.css

// vue.config.js

module.exports = {
  publicPath: '../',
}



<!DOCTYPE html>
<html lang=en>
<head>
  <title>test</title>
  <link href=../css/app.0b79487b.css rel=preload as=style>
  <link href=../js/app.67ace555.js rel=preload as=script>
  <link href=../js/chunk-vendors.e7ac9ff2.js rel=preload as=script>
  <link href=../css/app.0b79487b.css rel=stylesheet>
</head>
<body>
<div id=app></div>
<script src=../js/chunk-vendors.e7ac9ff2.js></script>
<script src=../js/app.67ace555.js></script>
</body>
</html>

到此这篇关于vue-cli设置publicPath小记的文章就介绍到这了

公孙元二
关注
专栏目录
Vue CLI 配置详解：publicPath、outputDir、assetsDir、indexPath、filenameHashing、configureW
api_git355的博客
09-23 1172
作为一个开发人员，了解 Vue CLI 的配置选项是非常重要的，因为它们可以帮助我们更好地控制项目的构建和输出结果。在本文中，我们将详细介绍几个常用的 Vue CLI 配置选项，包括：publicPath、outputDir、assetsDir、indexPath、filenameHashing、configureWebpack 和 productionSourceMap。如果你的项目中还没有该文件，可以在项目根目录下创建一个，并将配置选项以模块导出的方式进行配置。请注意，以上的示例代码都是在。
安装vue-cli3.0版本指南
云端-公子清
10-19 3683
安装vue-cli3.0版本操作指南 日常使用vue-cli3.0以下版本，随着前端不断更新vue-cli3.0以上版本，那么安装新版本会遇到很多问题，并不是所有人都会一番风顺，应粉丝要求，出3.0以上版本操作指南 请先看下鄙人的vue-cli3.0以下版本操作详情，百试不错的详情操作，实践中尝试了很多次错误，才总结出来的真经方法： 安装vue错误详情解决办法:https://blog.csdn.net/Josiah_Yuan/article/details/103605963 那么vue-cli3.0
vue-cli设置publicPath小记
11-20
几种设置publicPath后，再对比打包后的index.html文件 测试背景： 每次打包build完后，都单独生成一个/dist文件夹，且dist中每次都只有相同文件目录 部署的时候，是部署在服务器的一个/test文件夹下 打包后的文件目录： ├─dist ├─css ├─img └─js index.html 一、不设置publicPath时，部署后请求路径： http://111.222.333.444:8888/css/app.0b79487b.css // vue.config.js module.exports = { // publicPath:
Vue CLI 设置 publicPath：打包后的应用可部署在任意路径
前端技术
12-21 6010
Vue CLI 设置 publicPath：打包后的应用可部署在任意路径
转载- vue-cli设置publicPath小记
王声声的博客
06-09 1296
这篇真的写的很好。直接转了。 https://www.jb51.net/article/184694.htm
Vue.config文件里边的publicPath的配置使用
最新发布
2201_75705263的博客
03-05 6176
如果你的项目里面的静态文件都放在public文件中，那么使用的时候要使用publicPath这个变量，防止打包后静态文件找不到；你需要通过绝对路径来引用它们。因为：任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack；相当于打包过后的路径上多一个文件夹的名字。
vuecli3修改html,vue-cli3简单使用配置
weixin_39957461的博客
06-07 689
1.下载安装vue-cli3，这里我使用npm安装npm install -g @vue/cli如果已经安装之前版本(1.x或2.x)需要先卸载，再安装新的版本。安装完成后可以通过vue --version命令查看版本2.创建一个项目vue-cli3和之前创建一个项目的命令不同vue create project-name // vue-cli3vue init webpack projec...
vue-cli 项目优化
qq_25687271的博客
05-24 1249
1.路由懒加载 2.关闭productionSourceMap 3.使用resolve 4. 删除预加载 5.开启gzip压缩 CompressionPlugin 6.优化loadsh LodashModuleReplacementPlugin 7.使用cdn加速
vue-cli4.0搭建
依古比古的博客
08-01 1632
vue.js越来越火爆.更多的项目vue进行开发,实际开发搭建开发脚手架. html css javascript node.js环境(npm包管理工具) webpack构建工具 webpack是一个静态资源构建，打包的工具 1.安装node.js 2.版本10.0.0以上 默认c盘 可下载淘宝镜像 比较稳定 也可以使用yarn 二:安装vue-cli脚手架构建工具 cnpm install -g @vue-cli 全局安装 vue -V查看版本 3.0为4.5.6 创建vue3.0项目 vue cre
Vue-cli assets SubDirectory及PublicPath区别详解
10-14
主要介绍了Vue-cli assets SubDirectory及PublicPath区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
使用vue-cli创建项目登陆页面
m0_62019369的博客
10-27 1575
通过观察控制台可以发现，post发送请求时，请求参数是以json格式通过request payload进行传送的，的struts的并没有处理这种方式传递的参数。因为我们采用的是前后端分离的方式进行开发，前端和后端分别泡在不同的服务器上，基于安全性考虑，浏览器有同源策略，所以出现了跨域问题。输入的测试账号和密码均正确，使用get发送请求获取的响应为“密码正确”，但post方式发送的请求获取的响应为“密码不正确”！（起码是我们使用的struts版本），所以传递到服务器的参数并没有得到有效的解析。
Vue CLI4.0 webpack配置属性——publicPath
热门推荐
Jay的博客
04-28 1万+
publicPath Type: string Default: '/' 官方文档说明： 部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以请始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。 默认情况下，Vue CLI 会假设你...
vue-cli3.x部署时的publicPath配置
weixin_46190955的博客
04-23 3410
vue-cli3.x搭建的后台管理项目，由后台统一部署，测试服和正式服的域名都只有一个 ，但是要部署不同的项目并能正常访问，服务端同事就想通过给域名添加后缀 ，并且给打包后文件添加相同的路径前缀的方式来区别不同的项目 eg ：http://xxx.com/project是项目的访问地址 那访问打包后的产物时路径为：http://xxx.com/project/static 总之就是：服务的域名+你想设置的前缀（前后端保持一致）+静态资源文件路径 前端配合解决的方法如下： ..
vue-cli设置publicPath几种方式对比
whylost
06-11 1万+
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-U
vue-cli index.js dev 配置中 assetsPublicPath 的值不能填 "./" 的问题
weixin_30902251的博客
04-04 550
问题 使用nginx又代理了一层 在浏览器中/代表域名的根目录，./代表当前路径 线上发布的时候一般都会使用nginx反向代理，所以使用./是最靠谱的，但是vue-clidev中的assetsPublicPath不能配置成"./",而build中的却可以配置，并可以正常访问，虽然不影响发布但是影响开发效率 解决方法 因为webpack.dev.conf.js中的publicP...
关于vue打包时config.js文件中publicPath设置问题
jidaotianzun的博客
07-14 1232
vue的config.js设置问题
vue-cli3 资源路径publicPath配置成 ./ 和 / 的天大区别，net::ERR_ABORTED 404 (Not Found)，导致线上项目的部分路由懒加载跳转出现资源不存在的错误
weixin_42120767的博客
11-01 1300
如图 vue.config.js里的publicPath配置成./和/有什么区别呢?以我实际项目中遇到的问题来说明。 我项目中遇到的问题是： 1.线上项目部分路由跳转的时候控制台报错，出现资源加载错误net::ERR_ABORTED 404 (Not Found)，还有Loading chunk xxxx filed,请看清楚，这是部分页面，并不是全部！ 2.上面的问题只有在部署到线上的时候才有，本地开发环境没有。 3.如果路由采用直接引入，不用路由懒加载，既...
php public path,如何使用Webpack中publicPath路径
weixin_39621075的博客
03-19 300
这次给大家带来如何使用Webpack中publicPath路径，使用Webpack中publicPath路径的注意事项有哪些，下面就是实战案例，一起来看一下。outputoutput选项指定webpack输出的位置，其中比较重要的也是经常用到的有 path 和 publicPathoutput.path默认值： process.cwd()output.path 只是指示输出的目录，对应一个 绝对路...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值