在vue3配置环境信息

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

1、首先在项目下新建.env.dev和.env.prod文件

 

2、在刚才新建的两个文件中写入以下内容：

 

3、接下来在package.json中设置script

4、然后在vue.config.js中设置publicPath，主要用于项目部署的相对路径问题

 

5、（可选）配置axios的baseUrl，这个看你自己项目axios请求的具体情况

 以上就是配置流程了，喜欢的点点赞哦！

New Balance
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 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:
vue3 中的publicPath配置，history模式路由配置，index.html中引入public的静态资源
SmallGirlYang的博客
03-11 1万+
vue3打包时遇到的问题 1、publicPath 配置 在vue3中没有了baseUrl，在打包时如果想要设置一个根路径，需要设置在publicPath中 // 例如 https://127.0.0.1/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。 // 例如，如果你的应用被部署在 https://127.0.0.1/admin/，则设置 baseUrl 为 /admin/。 publicPath: process.env.NODE_ENV === "production" ? "/
前端 JS 经典：vue 开发中的 base 和 publicPath
最新发布
weixin_64684095的博客
05-27 2085
不知各位小伙伴有没有遇到过这样的问题，就是本地开发的好好的，结果打包后自信满满的交给运维部署，一上线，就是页面资源找不到了，跳转页面白屏了。等各种问题，这大概率就是配置问题。有这么两个配置 base 和 publicPath, 这个两个配置在 vue2 和 vue3 的表现形式不同，下面会详细介绍。这两个配置一般影响的是生成环境，对本地开发没啥影响。
VUE3.0项目配置
weixin_39703839的博客
10-31 1392
1、项目结构 ┌─dist 生产打包输出目录 ├─node_modules 模块依赖包 ├─public 静态html和网站图标 ├─src │ ┌─assets 静态资源，图标字体、图片、样式表 │ ├─components 公共组件 │ ├─plu...
Vue项目路由加前缀
weixin_42949219的博客
10-16 876
1）静态资源前缀 vue.config.js /module.exports 配置 publicPath：“/前缀”2）路由前缀 route/index.js export default new Router({ base:”/前缀" , })
vue3.0环境变量配置.md
04-08
vue3.0环境变量配置大致思路： 1，创建修改相关配置文件（Ctrl + C V即可） 2，封装 axios（根据配置文件，首先判断当前环境，获取对应环境的数据库地址作为当前环境下的基础地址，**拼接到** axios 里面的 url ） 3...
vue cli3 配置proxy代理无效的解决
10-16
在Vue CLI 3中，开发过程中常常需要配置代理来解决跨域问题，使得前端应用能够与后端API接口进行通信。然而，有时按照常规方法配置`proxy`后，可能会遇到代理无效的情况。本文将详细解释如何正确配置Vue CLI 3的`...
vue-cli3 热更新配置操作
10-14
确保你的环境变量 `NODE_ENV` 设置正确，以便在生产环境和开发环境中应用不同的配置。 总之，Vue CLI 3 的热更新功能对于提高开发效率非常有用。遇到热更新问题时，检查 `vue.config.js` 文件的配置，特别是与 HMR ...
详解vue-cli3多环境打包配置
10-17
Vue CLI 3 是 Vue.js 官方提供的一个脚手架工具，用于快速搭建 Vue.js 应用。在实际开发中，我们通常...通过理解和掌握 Vue CLI 3 的多环境打包配置，我们可以更加灵活地管理项目，确保代码在不同环境下的正确运行。
Vue 开发环境初始配置.docx
09-07
要配置 NodeJS 环境，我们需要安装 NodeJS，并配置环境变量。 默认环境修改配置 在安装 NodeJS 之后，我们需要修改默认环境配置。我们可以在环境变量中添加 NodeJS 的安装路径，以便在命令行中可以直接使用 NodeJS...
Vue2/3 config里配置publicPath/base之后proxy的配置修改
GIS小虫的博客
08-18 2498
记录一下 module.exports = { publicPath: '/myProject', devServer: { disableHostCheck: true, //webpack4.0 开启热更新 proxy: { '/localApi': { target: 'http://ip:port/api/', changeOrigin: true, pathRewrite: { '/myProject/loca
vue3.0+ 3.x config配置
qq_20111965的博客
06-30 2442
参考官方文档:https://cli.vuejs.org/zh/config baseUrl 从 Vue CLI 3.3 起已弃用，请使用publicPath。 publicPath Type: string Default: ‘/’ 这个值也可以被设置为空字符串 (’’) 或是相对路径 (’./’)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cord...
vue.config.js 全局配置
热门推荐
轻风细雨_林木木
03-20 2万+
1.Webpack配置实例 参考：https://cli.vuejs.org/zh/config/ vue.config.js vue.config.js 是一个可选的配置文件，如果项目中存在这个文件，那么它会被 @vue/cli-service 自动加载，你也可以使用 package.json 中的 vue 字段配置，但是package.json中需要严格遵照 JSON 的格式来写。 文件初始值： /** * @type {import('@vue/cli-service').ProjectOpti
大白话Vue之publicPath
anydo_wang
05-28 9935
大白话Vue之publicPath
Vue3.x 打包前配置
小破孩的博客
05-11 901
在项目中新建 vue.config.js 文件(vue cli 3 配置文件)，设置publicPath 然后设置publicPath module.exports = { publicPath: process.env.NODE_ENV === 'production' ? './' : '/', lintOnSave: false, productionSourceMap: false, css: { sourceMap: true }.
vue3实战-如何解决vue3项目打包发布到服务器后访问页面显示空白问题
0月影星云0的博客
03-21 4977
1、处理vue.config.js文件中的publicPath，处理如下： const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ publicPath: process.env.NODE_ENV === 'production' ? './' : '/', outputDir: 'dist', indexPath: 'index.html', lintOnSave: false,
vue3.0 配置@根路径
名人卷耶
08-06 1万+
vue.config.js 文件 module.exports = { publicPath: '/', // 从 Vue CLI3.3 起已弃用，请使用publicPath outputDir: 'dist', lintOnSave: true,// 是否在保存的时候检查 devServer: {// 环境配置 host: 'localhost', port: 8088, open: true, //配置自动启动浏览器
vue3无config文件夹打包后页面空白问题
采花小盗周的博客
03-11 1278
vue3项目没有config文件夹，vue2项目有config夹，打包之后页面空白问题解决（全）
Vue开发环境配置指南
而在Mac环境下，安装后无需额外配置环境变量。 完成nodeJS的安装后，可以通过命令`node -v`和`npm -v`来检查nodeJS和npm的版本。接着，你可以用`npm config list`查看npm的配置信息。注意，nodeJS自带的npm可能不是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

New Balance

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值