vuecli3配置全局域名抽离和history模式下的调整等

1.1配置通用的变量ip域名等使用的配置文件:

(该方法会被打被打包,如果是要想打包后修改域名会比较麻烦)
在与src同级创建两个文件:
这是开发环境配置的文件
这是生产环境配置的文件
然后在文件内部这样写变量:
在这里插入图片描述
接下来就可以通过vuex或者直接进行全局应用了!
在这里插入图片描述

1.2配置被抽离出来的ip域名变量

(上一种方法不能在打包后修改域名,这种方法能解决这样问题)
在src同级的pablic文件下创建config.js文件:
在这里插入图片描述
然后在文件中写域名或者其他想要配置的全局变量信息:
在这里插入图片描述
最后在进行应用:
在这里插入图片描述
打包完成后的config.js(可以进行修改):
在这里插入图片描述

2.1history模式下进行打包

这个模式地址栏不会有#号
首先:在router/index.js中
在这里插入图片描述
ps:如果服务器不是根路径,需要这样:

在这里插入图片描述
然后在src同级的目录下创建的-打包-配置文件vue.config.js配置publicPath
在这里插入图片描述
ps:当服务器不是根路径时:(/font-test/为你服务器dist文件放的文件名)
在这里插入图片描述
接下来打包即可。

3.1后台的配置

通过nginx配置的服务:
也可以参考这边文章:
https://segmentfault.com/a/1190000017009422?utm_source=tag-newest

首先下载nginx,然后修改conf/nginx.conf
在这里插入图片描述
ps:服务器非根路径:
在这里插入图片描述
然后把dist文件放在
在这里插入图片描述然后启动nginx:双击exe或者在该文件下打开cmd:输入nginx -s reload
然后在浏览器输入http://localhost回车即可;

ps:注意三个地方是否是根目录。

回答: 在Vue3中,抽离封装是一种常见的开发技巧,可以将一些逻辑或数据处理的代码提取出来,以便在多个组件中复用。在引用\[1\]和引用\[2\]中,都展示了Vue3中的抽离封装的示例代码。这些示例代码中,通过引入一个名为publicModule的模块,获取到了一些数据,并在组件中进行展示和操作。在引用\[1\]中,通过setup函数返回了一个包含数据和处理函数的对象,而在引用\[2\]中,使用了Vue3的toRefs函数将数据转换为响应式对象。这样做的好处是可以在组件中直接使用数据,而无需手动解构。另外,引用\[3\]中提到了如何新建一个Vue3+Ts的项目,并给出了一些基本的项目结构和文件组织方式。总的来说,抽离封装是一种提高代码复用性和可维护性的技术手段,在Vue3中有多种实现方式,开发者可以根据具体需求选择适合的方式进行抽离封装。 #### 引用[.reference_title] - *1* *2* [vue3的抽离封装方法](https://blog.csdn.net/SmartJunTao/article/details/126142874)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue3 Hooks 模块化抽离](https://blog.csdn.net/web2022050901/article/details/127579241)[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^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值