vue显示服务器目录,vue-cli 静态资源在另一台服务器上.要如何配置路径

最新推荐文章于 2024-03-16 11:08:36 发布
最新推荐文章于 2024-03-16 11:08:36 发布
阅读量407 收藏
点赞数
文章标签： vue显示服务器目录

问题:

现在项目用vue-cli开发.遇到一个问题.就是说开发环境,测试环境,生产环境的静态资源路径都不一样.但是都在其他的服务器.

例如:

我开发环境静态资源都在本地的static目录下面.那么引用的时候直接根据目录来就可以.

上传到测试环境后.项目本身在 ceshi.com 下.但是图片资源都在 file.ceshi.com 下.这个时候我build之后的代码引入文件路径就出问题了.等发布后在生产环境路径又不一样.请问要如何解决这个问题

理想状态:

通过不同的命令参数替换静态资源路径, 例如:

1,开发环境 node build/build.js ./assets : 那么该环境下的所有静态资源都是访问./assets下面的

2,测试环境 node build/build.js file.ceshi.com 那么该环境下的所有静态资源都是访问file.ceshi.com下面的

求大神支招

目前获取node命令行参数已经完成.不知道该如何抛出全局的变量

251ccbc43f2bfa963c9244e69ab339a8.png

测试过这个.但是它把所有的引入都替换掉了.包括css js的. 我希望的是只替换掉静态资源的部分

虫啊啊
关注
Vue-cli打包后部署到子目录下的路径问题说明
10-14
Vue CLI 是一个非常流行的前端构建工具，用于快速搭建 Vue.js ...这将帮助你的 Vue.js 应用在服务器的二级子目录下运行，同时解决了资源路径的问题。请记住，不同的服务器配置可能略有差异，因此需要根据实际情况调整。
详解Vue-cli中的静态资源管理（src/assets和static/的区别）
08-27
在 Vue-cli 中，静态资源主要存放在两个目录下：src/assets 和 static/。 src/assets 目录用于存放需要被 Webpack 处理的静态资源，例如图片、CSS 文件等。在编译过程中，Webpack 会将这些资源处理成模块依赖关系，...
vue获取文件服务器目录结构采用的是,Vue3（三）CDN + ES6的import + 工程化的目录结构 = 啥？...
weixin_39644750的博客
08-06 499
突发奇想这几天整理了一下vue的几种使用方式，对比之后发现有很多相似之处，那么是不是可以混合使用呢？比如这样：vue的全家桶和UI库，采用传统的方式加载(CND、script)。自己写的js代码，采用ES6的 import 方式加载。目录结构采用vuecli建立的项目的目录结构。入口页面用vite项目的 index.html。不用babel做转义(因为还不会用)。不用webpack(因为总是报错，...
vue根据不同的环境配置接口路径，带不同版本号的接口路径配置，脚手架2及3以上都可以配置
qq_42780155的博客
07-02 2557
首先创建两个不同环境的文件； 注意：VUE_APP_BASE_API需要和下面的都对应 生产环境： #.env.development # just a flag ENV = "development" #键值对，必须以VUE_APP开头 # base api VUE_APP_BASE_API = "http://XXXXXXX" 开发环境： window.location.origin是指定发布环境的地址，不用每次手动去改了 #.env.production # just a flag ENV
vue部署至服务器的路径设置
最新发布
chiwawa_的博客
03-16 417
vue部署至服务器非根目录下
Vue不同的环境使用不同的路径
weixin_34146805的博客
12-03 987
1.首先安装npm install cross-env -D 这个迷你的包能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。 2.对于config文件下的dev.env.js与prod.env.js进行改写 只举例开发环境的配置： 'use strict' const merge = require('webpack-merge') ...
VUE项目打包成静态资源加到新的vue项目中
weixin_52465551的博客
12-07 1659
1.项目1 打包 需要修改的文件： build文件夹中webpack.base.conf.js文件 output: { path: config.build.assetsRoot, filename: '[name].js', publicPath:"./" //这行是修改后的，注释掉的是原代码 // publicPath: process.env.NODE_ENV === 'production' // ? config.bui
vue-cli3访问public文件夹静态资源报错的解决方式
10-14
在进行以上配置时，也要注意`vue.config.js`文件中的`baseUrl`的设置应根据实际部署环境进行调整，以确保资源路径的正确性。通过这样的配置，可以确保静态资源文件无论在开发还是生产环境下都能被正确加载。 总结...
vue-cli2.x项目优化之引入本地静态库文件的方法
08-27
本文主要介绍了 Vue-cli 2.x 项目优化方法之一，即引入本地静态库文件的方法。该方法可以有效地优化项目的编译速度和文件大小。 首先，需要将 node_modules 下相应的 xxx.min.js 文件复制到项目的 static 文件夹下...
Vue打包后访问静态资源路径问题
12-13
Vue介绍中static文件夹里放的是静态资源目录，如图片、字体等。 我们发现运行npm run start后本地图片路径是没问题的，但是打包上传后会怎么样呢？ 我们知道，执行npm run build 后会生成dist文件夹，把里面的index.html在浏览器运行会发现 图片路径出错啦！！！ 解决方法： 1.先找到config下的index.js文件 把最后的’/’ 改为 ‘./’ 2.接着把图片地址改为 以上就是Vue打包后访问静态资源路径问题的相关知识点，感谢大家的阅读和对软件开发网的支持。
vue项目多个不同的服务器请求地址管理
start_sea的博客
11-28 3150
多服务器请求地址的情况下，axios请求封装中，需要根据不同的请求地址创建不同的axios对象，通过axios.create()设置不同的baseURL地址。在后续封装请求API时，根据不同的接口使用不同的axios对象即可实现同一个vue项目请求不同的服务器地址。在vue项目开发过程中，获取不同的数据可能会出现需要请求多个不同服务器地址的域名，这个时候需要对不同域名的请求地址进行管理以及跨域的代理。这是单一服务器请求地址的写法，直接在axios.defaults选项中配置baseURL地址。
VUE目录和文件 自己看的
wei4264的博客
03-10 468
VUE目录和文件 自己看的 node_modules：npm 加载的项目依赖模块。 build：存放webpack的配置文件 test：测试文件夹 public：静态文件目录，一般存放不会变动的静态文件。 static：纯静态资源，不会被wabpack构建。 src：进行开发的目录。里面包含了几个目录及文件： assets：静态文件目录，一般存放可能会变动的静态文件 components：组件文件（.vue文件）的目录 router：vue-router路由的相关文件的目录 store：仓库目录，应用级
vue 静态项目 开发和线上配置
weixin_33859844的博客
01-25 226
静态站点配置 看下面这个图片，index.html和static文件夹 开发时的相对路径和编译完成后的相对路径是一样 开发配置 //静态文件目录 app.use('/static', express.static('./static')) output: { path: path.resolve(__dirname, '.....
vue-Cli3，Vue-Cli4打包后如何配置静态资源路径？（自定义浏览器icon图标，title文本）
韩旭的博客
12-28 3240
文章目录为什么要配置静态资源路径？1、首先我们要清楚什么样的环境下我们需要配置静态资源路径？2、如何配置？ 为什么要配置静态资源路径？ 1、首先我们要清楚什么样的环境下我们需要配置静态资源路径？ 那肯定是不是单纯的一个前端写的单页面应用的时候，我们仔细想想，如果我们开发了一个新模块，但是不是基于原来项目开发的，而实更换了一个路径？不不不，只是说新起了一个子路径，相当于二级路径，那么这个时候我们还能用原来的默认的配置去寻找接口地址，静态资源地址吗？ 当然这样肯定是行不通的，所以说我们需要配置一下你当前这个模块
vue 打包后将js css img放在其他服务器上 类似CDN
qq_40194097的博客
03-24 604
参考https://webpack.css88.com/guides/public-path.html 在config.js publicPath: process.env.NODE_ENV === 'production' ? 'http://192.168.0.104:8007/' : config.dev.assetsPublicPath, `
vue项目设置打包后的静态文件访问路径
热门推荐
start_sea的博客
08-31 1万+
*啰嗦一下：**相同域名下可能会存在两份相关或不相关的代码，需要通过切换文件夹路径进入不同项目时，需要在项目打包输出代码时设置静态文件的访问路径（vue、react都要）。**静态文件访问路径说明：**项目的静态文件访问路径在本地运行和服务器访问是有区别的，默认状态下服务器上的项目代码，访问路径是从服务器根目录开始。vue项目的最终项目文件需要经过打包输出，静态文件的访问路径需要在vue.config.js文件中设置。**H5中的访问设置：**在H5中，静态文件访问路径的区别。...
vue 调用图片（服务器和本地）
u011200562的博客
10-26 7487
一、本地（一般调用有三种办法） <script> //方法1.直接将图片引入为模块 require imgUrl from "../assets/test.png" //方法2.将imgUrl放在数据里 data(){ return { imgUrl:require("../assets/test.png") } } //方法3.在生命周期函数中设置 data(){
Vue打包静态资源本地访问（不用放在服务端）| 比如放在Android 应用中
汪随安的博客
05-13 7179
解决vue打包静态资源问题！一、 打包服务端访问资源，直接build就行了二、 打包成静态资源，build出问题啦！！ 一、 打包服务端访问资源，直接build就行了 打包成服务器访问的资源，是默认的打包方式，直接运行自带脚本npm run build,就可以将资源打包在dist目录下 打包好之后的文件为dist目录下的：static与index.html 打包完之后直接扔服务器上就行了，直接运行 二、 打包成静态资源，build出问题啦！！ 使用场景： 好比我写的是H5应用，放在浏览器上直接可以打开浏
快速搭建Vue.js项目：vue-cli与Webpack详解
"使用vue-cli脚手架工具搭建vue-webpack项目是一种高效且便捷的方法，尤其适合于大型和需要长期维护的Vue.js应用。它解决了手动配置复杂工具链的问题，如模块化、转译、预处理器、热加载、静态检测和自动化测试等，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值