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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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单页面应用打包后相对路径、绝对路径相关问题

    在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过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.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 前端项目打包后,要求可以再次修改请求后端接口的基础地址.平常开发中在 Vue 项目中使用 axios 时把请求后端接口的基础地址写在了 baseURL 里. 这样子打包后如果要改图里红框处的地址,要么去打包编译后的文件堆里一个个搜索(如果项目不小的话,这文件堆可不少...),找到后直接改,要么在源码里改完后重新再打包部署,这两种做法都显得有些麻烦,且维护性也不好. 所以本文用一种较好的方案来解决以上问题,通过创

  • vue多次打包后出现浏览器缓存的问题及解决

    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项目打包后如何修改访问后端地址

    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修改打包配置如何实现代码打包后的自定义命名

    vue修改打包配置如何实现代码打包后的自定义命名

    目录 修改打包配置实现代码打包后的自定义命名 修改配置后打包为 首先修改router文件 打开项目中的build文件夹 修改js打包的命名方法 修改css打包的命名方法 命名修改如下 图片还有一种情况是 vue 修改打包文件名 修改打包配置实现代码打包后的自定义命名 打包后文件 修改配置后打包为 首先修改router文件 例如,这是原本方法引用页面: //基础配置 import BasicDispose from './pages/BasicDispose/BasicDispose' 现修改为:

  • webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    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 此

随机推荐