vue之解析vue.config.js的配置项之publicPath

最新推荐文章于 2024-05-27 23:13:20 发布
最新推荐文章于 2024-05-27 23:13:20 发布
阅读量2.8k 收藏 4
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40278396/article/details/131221756
版权

一般在vue项目当中，都有一个vue.config.js，一个可选的配置文件，之前总是再用，但对于其中的配置项具体的用途了解少之又少，所以准备对此文件常用的配置项或webpack插件做一下记录。

publicPath字段的用途

 官网上的描述如下图所述

 

修改运行后

 publicPath配置成'/aaa/bbb/ccc'， 则需在相应的服务器路径中新建aaa>bbb>ccc的文件夹，然后将打包后的文件放进去

默默0805
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue.config文件里边的publicPath的配置使用
2201_75705263的博客
03-05 4349
如果你的项目里面的静态文件都放在public文件中，那么使用的时候要使用publicPath这个变量，防止打包后静态文件找不到；你需要通过绝对路径来引用它们。因为：任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack；相当于打包过后的路径上多一个文件夹的名字。
关于vue.config.js配置
PrototypeOne的博客
01-25 2313
关于vue.config.js配置 在平时vue项目中，我们逐渐开始需要自己配置一下config配置。接下来的内容作为我自己学习查阅vue.config.js的官方文档对常用的配置小做笔记。 官方文档网址https://cli.vuejs.org/zh/config/#vue-config-js 什么是vue.config.js vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载
前端 JS 经典：vue 开发中的 base 和 publicPath
最新发布
weixin_64684095的博客
05-27 1974
不知各位小伙伴有没有遇到过这样的问题，就是本地开发的好好的，结果打包后自信满满的交给运维部署，一上线，就是页面资源找不到了，跳转页面白屏了。等各种问题，这大概率就是配置问题。有这么两个配置 base 和 publicPath, 这个两个配置在 vue2 和 vue3 的表现形式不同，下面会详细介绍。这两个配置一般影响的是生成环境，对本地开发没啥影响。
vue - vue的配置文件vue.config.js介绍
qq_43886365的博客
09-30 4943
vue项目中的配置文件vue.config.js介绍
nginx部署vue项目,给访问路径加前缀的方法：vue.config.js配置publicPath和nginx配置alias
字节叔叔
04-18 7874
本文主要涉及到 Vue.js 项目部署在 Nginx 上的相关问题。其中，publicPath 选项可以用于设置 Vue.js 项目的访问路径前缀，alias 指令可以用于 Nginx 中将请求路径映射到指定的文件系统路径。同时，通过设置 Nginx 配置文件，可以将多个 Vue.js 项目部署在同一个域名下的不同路径中。使用 alias 指令可以更加方便地管理多个 Vue.js 项目，并使配置文件更加简洁易读。
Vue2 系列：vue.config.js 参数配置
weixin_64684095的博客
06-29 9273
注意：其值应该是一个对象，对象的 key 是入口的名字，value 是：1.一个指定了 entry, template, filename, title 和 chunks 的对象 (除了 entry 之外都是可选的)；说明：部署应用包时的基本 URL，例：https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/说明：放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。默认值：'index.html'
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.config.js 全局配置
m0_61177365的博客
07-29 4828
用法和 webpack 本身的 output.publicPath 一致，但是 Vue CLI 在一些其他地方也需要用到这个值，所以始终使用 publicPath 而不要直接修改 webpack 的 output.publicPath。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置。可以看出，开启productionSourceMap后，浏览器控制台明确的告诉我们test这条结果的输出语句在main.js的20行。所以，source map的作用就是定位。
vue-cli3中vue.config.js配置教程详解
10-16
1. **publicPath**: 这个配置项用于指定应用部署的基础 URL。在生产环境中，通常设置为 '/public/' 或者实际的服务器路径；而在开发环境中，设置为 './' 或 '/'，确保本地开发时的路径正确。从 Vue CLI 3.3 开始，`...
vue.config.js常用配置详解
10-15
Vue CLI 是 Vue.js 的...以上是 `vue.config.js` 的常用配置项，通过自定义这些配置，可以更好地适应项目需求，提高开发效率。在实际项目中，根据具体需求调整这些配置，能够帮助开发者创建出符合预期的 Vue.js 应用。
vue3.0 vue.config.js 配置实战.docx
11-22
在本文中，我们将详细介绍 Vue.config.js 的配置项和使用方法。 基础配置 在 Vue 3.0 项目中，需要创建一个名为 `vue.config.js` 的文件，该文件用于配置 Vue 项目的各种参数和选项。这个文件需要与 `package.json...
详解Vue CLI3配置解析之css.extract
12-11
配置项如下： ```javascript webpackConfig.plugin('extract-css').use(require('mini-css-extract-plugin'), [extractOptions]) ``` `extractOptions` 包含 `filename` 和 `chunkFilename`，这两个属性用于指定主...
Vue CLI4 Vue.config.js标准配置(最全注释)
10-15
1. **publicPath**: 这个配置项决定了生成的静态资源在生产环境中相对于服务器的基础 URL。例如，如果设置为 `/site/vue-demo/`，那么所有资源链接将以此路径开头。 2. **indexPath**: 定义生成的 HTML 文件（默认...
webpack基础篇（七）：拆分开发环境和生产环境配置
知之为知之，不知为不知
12-02 1024
我们手工的调整 `mode` 选项，可以实现`生产环境`和`开发环境`的切换，但很多配置在生产环境和开发环境中存在不一致的情况，比如开发环境没有必要设置缓存，生产环境还需要设置公共路径等等。 拆分开发环境和生产环境，让打包更灵活。
vue中vite.config.js配置跨域以及环境配置详解
m0_58293192的博客
01-04 5899
vue中vite.config.js配置跨域以及环境配置详解
vue.config.js配置选项
GQDD99的博客
02-18 199
vue.config.js配置选项
Vue2/3 config里配置publicPath/base之后proxy的配置修改
GIS小虫的博客
08-18 2485
记录一下 module.exports = { publicPath: '/myProject', devServer: { disableHostCheck: true, //webpack4.0 开启热更新 proxy: { '/localApi': { target: 'http://ip:port/api/', changeOrigin: true, pathRewrite: { '/myProject/loca
Vue中动态设置publicPath或axios.defaults.baseURL
树上骑个猴的博客
10-27 3603
有时候需要动态配置vue.config.js中的publicPath。 新建public/config.js文件 代码如下： prod_config.publicPath = './' 在index.html文件引入 <body> <div id="app"></div> <script type="text/javascript" src="./config.js"></script> </body> 在m
如何搭建一个完整的Vue3.0 + ts 的项目
sinat_28371057的博客
12-13 4865
如何搭建一个完整的Vue3.0 + ts 的项目 相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段（最终产品的候选版本，如果没有问题则可发布成为正式版本）。所以Vue3.0的学习是我们必然的趋势，今天，主要分享一下Vue3.0的详细搭建过程，希望可以为初入Vue3的小伙伴有所帮助。 我们现在开始进入今天的主题啦~~ 一、安装 1. 安装nodejs 此处提供nodejs下载地址：https://nodejs.org/zh-cn/dow..
vue.js中vue.config.js的配置说明
08-25
vue.config.js是用来配置Vue.js项目的配置文件。它主要包含以下配置项： 1. publicPath：指定部署应用时的基本URL路径。 2. outputDir：指定打包后的输出目录。 3. lintOnSave：指定在保存文件时是否执行eslint检查。 4. devServer：用于配置开发服务器的选项，比如代理设置、热更新等。 5. configureWebpack：用于自定义Webpack的配置。可以通过该配置项修改Webpack的一些默认配置，如添加插件、修改Loader等。 6. chainWebpack：用于进一步修改Webpack的配置。可以通过该配置项链式调用Webpack配置API来进行更细粒度的配置。比如修改Loader的配置、添加自定义的Loader等。 7. css：用于配置CSS的相关选项，如是否开启CSS的SourceMap、是否将CSS提取为单独的文件等。 这些配置项可以根据项目的需求进行调整，以满足具体的开发和部署需求。它们可以在vue.config.js文件中进行配置，并根据需要进行修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue.config.js完整配置-超详细](https://download.csdn.net/download/digital_AI/87824264)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue - vue.config.js中devServer配置方式](https://download.csdn.net/download/weixin_38499336/12933067)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题](https://download.csdn.net/download/weixin_38668160/14900868)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值