vue cli3.x打包后如何修改生成的静态资源的目录和路径
目录
- vue cli3.x打包后修改生成的静态资源的目录和路径
- vue3.3打包后,路径出错问题
vue cli3.x打包后修改生成的静态资源的目录和路径
在vue cli 2.x版本修改目录和路径,都在'/config/index'文件里修改。
但是vue cli升级成3.x发现这些文件都不见啦,就一个'vue.config.js'文件,我们可以在这里修改:
`module.exports = { // 没有书写outputDir属性 默认'dist' 对应dev.assetsSubDirectory. outputDir: 'static', // 没有书写baseUrl属性 默认'/' 对应dev.assetsPublicPath. // 从 Vue CLI 3.3 起baseUrl已弃用,请使用publicPath. baseUrl: '/' }`
因为业务需求,需要把打包好的css和js文件放到阿里云的oss服务器上。
刚开始baseUrl写上域名即可。
过了几天发现本地起服务器的时候,会把这个baseUrl拼在本地地址后面导致页面报错
解决方法:
baseUrl: process.env.NODE_ENV === 'production' ? '你的域名' : '/'
vue3.3打包后,路径出错问题
由于3.3废弃baseUrl了,所以不能设置baseUrl
module.exports = { publicPath: '/dist/', outputDir: 'dist', assetsDir: 'static', lintOnSave: true, productionSourceMap: false, devServer: { } }
请设置vue.config.js里面的publicPath,outputDir
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
解决vue单页面应用打包后相对路径、绝对路径相关问题
在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML.css.js等文件,使用的都是绝对路径.下面可以举几个例子来看一下: 1.打包后的index.html文件 2.打包后的css文件 所以,如果在项目中需要使用相对路径来获取静态的资源文件,需要怎么做呢? 1.修改webpack配置文件中的assetsPublicPath,修改为如下图所示. 修改配置后,进行打包发现,打包后的index
-
vue本地打开build后生成的dist文件夹index.html问题
1.问题描述: npm run build 在dist 文件生成了 index 和 static 文件夹,为什么本地打开不了,给后端就能打开? 如何才能像访问 npm run dev 的地址那样访问? 2.种简单方法 2.1 修改配置在本地访问 更改一些路径参数后,然后再次运行npm run build 就可以在本地打开index.html 改哪里? config/index.js文件 build: { assetsPublicPath: '/' } 改成 build: { assetsPubl
-
vue完成项目后,打包成静态文件的方法
vue完成项目后,如何打包成静态文件,并且用Node调试 打包 1.修改config里面的index.js里面的productionSourceMap为false,默认情况是true(true代表打包环境是开发环境,可以进行调试:false表示生产环境,正式上线的) 2.在cmd里面运行npm run build,(运行的是build里面的build.js文件) 生成的包放在dist下面 使用node进行调试 1.在根目录下创建prod.server.js文件,这个文件的作用是作为一个小的htt
-
vue cli3.0打包上线静态资源找不到路径的解决操作
项目中遇到打包之后静态资源路径找不到,报如下错误: 解决方法是: 在项目的根目录下创建vue.config,js文件,在里面配置静态资源的路径,publicPath是配置静态资源路径的属性,vue.config,js文件的代码如下: module.exports = { publicPath: './' } 补充知识:vue-cli3 npm run build 打包后静态资源的配置 vue.config.js的配置 vue.config.js配置如下: const path = require
-
vue cli3.x打包后如何修改生成的静态资源的目录和路径
目录 vue cli3.x打包后修改生成的静态资源的目录和路径 vue3.3打包后,路径出错问题 vue cli3.x打包后修改生成的静态资源的目录和路径 在vue cli 2.x版本修改目录和路径,都在'/config/index'文件里修改. 但是vue cli升级成3.x发现这些文件都不见啦,就一个'vue.config.js'文件,我们可以在这里修改: `module.exports = { // 没有书写outputDir属性 默认'dist' 对应dev.assetsSub
-
Vue项目打包后可修改基础接口地址配置的具体操作
目录 一.目的 二.具体操作实现 总结 一.目的 最近在学习或工作中遇到,把 Vue 前端项目打包后,要求可以再次修改请求后端接口的基础地址.平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里. 这样子打包后如果要改图里红框处的地址,要么去打包编译后的文件堆里一个个搜索(如果项目不小的话,这文件堆可不少...),找到后直接改,要么在源码里改完后重新再打包部署,这两种做法都显得有些麻烦,且维护性也不好. 所以本文用一种较好的方案来解决以上问题,通过创
-
vue多次打包后出现浏览器缓存的问题及解决
目录 vue多次打包后出现浏览器缓存 解决方案 使用hash解决vue浏览器的缓存 缓存问题 怎么解决缓存问题 解决办法 vue多次打包后出现浏览器缓存 每次打包更新版本上传到服务器上,会偶尔出现代码没有更新还是旧代码的逻辑,这就代表浏览器存在缓存的问题了. 解决方案 vue-cli2 webpack .prod.conf.js 下修改output const Timestamp = new Date().getTime(); output: { path: config.build.
-
nuxt+axios实现打包后动态修改请求地址的方法
需求:把请求地址等一些配置暴露出来以便打包后动态修改,而不需要重新打包编译. 这样也是挺不错的,当一个项目需要部署到几个不同的服务器上时候,就不用说每次都要修改后再重新打包.功能不变时,单单是修改一下请求地址省了不少功夫. 1.开始 把需要动态修改的配置写在一个配置json文件里面.该配置文件可以放在static目录下: 静态文件目录:静态文件目录 static 用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理. 服务器启动的时候,该目录下的文件会映
-
解决vue+elementui项目打包后样式变化问题
博主刚刚解决了index.html空白问题,刚打开项目页面又发现了样式出现了大问题,样式与开发版本有很大不同,有些样式没有生效.利用搜索引擎, 找到了问题所在以及解决办法: main.js中的引入顺序决定了打包后css的顺序,组件内的样式没有生效可能是被第三方组件样式覆盖了,所以把第三方组件放在前面引入,router放在后面引入,就可以实现组件样式在第三方样式之后渲染. 代码如下: main.js // The Vue build version to load with the `import
-
vue-cli3.0项目打包后如何修改访问后端地址
目录 打包修改访问后端地址 问题 解决 项目打包后直接修改ip地址 实现方案 1. 方案一 2. 方案二 3. 方案三 打包修改访问后端地址 问题 原本是将访问后台的地址写在代码里面,但是这样的话打包之后就不能修改了,只能在代码里面修改,然后重新打包 解决 在vue-cli3.0之前的版本,项目目录有static不会被打包,而在vue-cli3.0项目目录没有static文件夹,但是有public文件夹是不会被打包(因此有些没有npm的插件或者包应该放在public目录下),所以在public目
-
解决vue脚手架项目打包后路由视图不显示的问题
脚手架vue-cli 搭建的项目,build后放于服务器上,发现其他资源全部变成静态加载成功,但路由视图为空,最初以为是webpack打包的问题,找了好久发现是路由配置问题. 解决办法如下: Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', base: '/system/', //添加根目录 scrollBehavior: () => ({ y: 0 }), routes }) 比如我是将打包后的dist和ind
-
vue修改打包配置如何实现代码打包后的自定义命名
目录 修改打包配置实现代码打包后的自定义命名 修改配置后打包为 首先修改router文件 打开项目中的build文件夹 修改js打包的命名方法 修改css打包的命名方法 命名修改如下 图片还有一种情况是 vue 修改打包文件名 修改打包配置实现代码打包后的自定义命名 打包后文件 修改配置后打包为 首先修改router文件 例如,这是原本方法引用页面: //基础配置 import BasicDispose from './pages/BasicDispose/BasicDispose' 现修改为:
-
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改,改为 目的是将资源文件的引入路径,改为相对地址(相对index.html) 二.此时html中的js.css.img引入均没有问题,但是css中的background-image还是报404 此
随机推荐
- JavaScript面向对象程序设计三 原型模式(上)
- 将MSSQL Server 导入/导出到远程服务器教程的图文方法分享
- AngularJS入门教程之路由机制ngRoute实例分析
- java 算法之归并排序详解及实现代码
- iOS中Swift指触即开集成Touch ID指纹识别功能的方法
- Javascript中八种遍历方法的执行速度深度对比
- 初识ASP.NET Mvc5+EF7的奇妙之旅
- PHP SPL标准库之数据结构栈(SplStack)介绍
- Python格式化css文件的方法
- 十、会话状态
- dl,dt,dd制作的CSS垂直菜单
- AS3.0 实例学习 熟悉tween以及tweenEvent的运用
- Android自定义WaveProgressView实现水波纹加载需求
- Android自定义组件获取本地图片和相机拍照图片
- 详解Spring Aop实例之AspectJ注解配置
- VC实现让关闭按钮成灰色不可用的方法
- 联想服务器X3650 M2 配置RAID5与热备盘图文方法
- 小程序云开发如何实现图片上传及发表文字
- Python实现二叉树的最小深度的两种方法
- javascript/jquery实现点击触发事件的方法分析