vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决

目录
  • vue-cli3.0修改打包后的文件地址和文件名
    • 问题描述
    • 修改文件名
    • 报错解决
  • vue文件夹名称修改导致错误

vue-cli3.0修改打包后的文件地址和文件名

问题描述

最近开发一个web端vue项目时使用了vue-cli3.0搭建项目目录，开发过程中一切顺利，没有遇到什么问题，开发完毕打包上线时出现了问题，打包后的文件默认在dist目录下，打开index.html时发现不能运行，报错如下：

现在有两个问题

  • 我想修改打包后的文件夹名称；
  • 上述报错问题的解决；

网上查询一番，发现大家都说修改config/index.js文件的配置。问题是该项目是用cli3.0搭建的，压根就没有config文件夹···

修改文件名

经过查询，原来3.0搭建的项目已经取消了config文件夹，所有配置都是在最外层的vue.config.js文件中进行配置，如下图：

修改文件名，只需要设置其中的outputDir选项即可：

module.exports = {
	outputDir:"myProject" //打包后的项目目录名称
}

报错解决

报错问题网上很多都是在config/index.js修改build的路径，而vue-cli3.0的vue.config.js不能直接写build对象，另一种说法是修改其中的baseUrl，当你运行时会提示baseUrl已经废弃，请用publicPath代替。

找到问题了就简单了，直接修改publicPath即可：

module.exports = {
	publicPath:"./"  //基础路径
}

再次npm run build ,生成了自己想要的文件目录名称，其中的index.html也能够正常打开；

vue文件夹名称修改导致错误

一般这种情况是你把原来的文件夹名称修改了，所以重新改回来就可以了

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

赞 (0)

相关推荐

  • vue-cli 项目打包完成后运行文件路径报错问题

    本文介绍了vue-cli 项目打包完成后运行文件路径报错问题,做个笔记,也分享给大家. 刚新建的vue-cli项目,同事说要打包一版进行测试,打包完成后放在tomcat上发现路径报错问题. 百度了一下,怀疑是build里面没有定义路径问题,度友提供了解决方案: 找到config文件夹下的index.js文件,修改路径代码 找到build对象,修改属性assetsPublicPath为 './' 但是由于vue-cli项目中已经没有config文件夹,需要在根目录下创建vue.config.js

  • 如何修改Vue打包后文件的接口地址配置的方法

    1.背景 常规的vue项目分为本地环境和生产环境,我们只要对 config 文件夹下的 dev.env.js 和 prod.env.js 做相应的配置即可.但是最近在做的项目中,涉及到私有化部署,就是对应的生产环境的地址,不是唯一的.如果每次都修改一个地址,再打包文件进行部署,过程繁琐且低效.那么如何把环境地址设置成可配置的,不需要再构建代码就能直接生效呢? 2.可选方案 进行了调研后,网上介绍的方案有2种: 1)在static上设置一个config.js,把配置的参数设置成 window 下的

  • 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创建的项目为例 1.文件路径不对 找到config文件夹下的index.js文件修改一下位置 看清楚是 build(上边还有个dev 是开发环境下的配置,不需要改动)下的 assetsPublicPath :将'/'改为'./' 2.背景图片路径不对 在css中写的background-img的路径出错 需要找到build文件夹下的utils.js,修改一下位置 加入红框内字段即可. 以上这篇解决Vue打包之后文件路径出错的问题就是小编分享给大家的全部内容了,希望能给大家一个

  • 解决vue单页面应用打包后相对路径、绝对路径相关问题

    在项目开发过程中,在部署过程中,用到了反向代理,这就要求前端代码中不能使用绝对路径.但是我们知道,一般情况下,通过webpack+vuecli默认打包后的HTML.css.js等文件,使用的都是绝对路径.下面可以举几个例子来看一下: 1.打包后的index.html文件 2.打包后的css文件 所以,如果在项目中需要使用相对路径来获取静态的资源文件,需要怎么做呢? 1.修改webpack配置文件中的assetsPublicPath,修改为如下图所示. 修改配置后,进行打包发现,打包后的index

  • vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决

    vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决

    目录 vue-cli3.0修改打包后的文件地址和文件名 问题描述 修改文件名 报错解决 vue文件夹名称修改导致错误 vue-cli3.0修改打包后的文件地址和文件名 问题描述 最近开发一个web端vue项目时使用了vue-cli3.0搭建项目目录,开发过程中一切顺利,没有遇到什么问题,开发完毕打包上线时出现了问题,打包后的文件默认在dist目录下,打开index.html时发现不能运行,报错如下: 现在有两个问题 我想修改打包后的文件夹名称: 上述报错问题的解决: 网上查询一番,发现大家都说修

  • 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.0中使用jQuery和Bootstrap的方法

    Vue CLI3.0中使用jQuery和Bootstrap的方法

    Vue 中使用 jQuery 和 Bootstrap 不是特别符合 Vue 原生的写法,但是有时候又要用,所以放上我的引入设置,供大家参考. 在 Vue CLI2.0 中引入 jQuery 和 Bootstrap 需要设置很多配置项,网上有很多方法法,这里不重复写了.直接上 Vue CLI3.0 配置步骤. 第一步:安装 jQuery. Bootstrap.popper.js依赖. 其中popper.js 用于在 Bootstrap 中显示弹窗.提示.下拉菜单,所以需要引入. npm insta

  • Vue cli3.0创建Vue项目的简单过程记录

    Vue cli3.0创建Vue项目的简单过程记录

    创建Vue项目 在要创建项目的文件夹下面打开Powershell窗口 输入命令 vue create 项目名称 选择第二项 回车后 选择是否使用历史路由 no 回车 选择 Less 回车 选择第三个 回车 选择第一个 回车 选择第一个 回车 是否保存模板 选择no 完成啦 完成 总结 到此这篇关于Vue cli3.0创建Vue项目的文章就介绍到这了,更多相关Vue cli3.0创建Vue项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • vue中使用vue-pdf组件实现文件预览及相应报错解决

    vue中使用vue-pdf组件实现文件预览及相应报错解决

    目录 前言 一.安装npm 依赖 二.引入组件 1.html中使用组件 单页 2.数据处理 单页 三.项目使用--代码部分 四.报错解决 总结 前言 使用vue-pdf组件实现文件预览功能 并在文件上增加操作按钮vue3不支持vue-pdf,vue3项目用pdfjs-dist 一.安装npm 依赖 1.在根目录下输入一下命令 npm i pdfjs-dist@2.5.207 --save npm i vue-pdf@4.2.0 --save 2.修改pacakge.json文件 "depende

  • MySQL5.73 root用户密码修改方法及ERROR 1193、ERROR1819与ERROR1290报错解决

    目录 一.免密码登录MySQL 二.修改密码.ERROR1193.ERROR1290 ERROR1290解决方法 ERROR1819解决方法 修改安全策略 ERROR1193解决方法 授权其他机器登录MySQL(可选) 结语 一.免密码登录MySQL 首先我们应该免密码登录root用户的MySQL才能进进行密码的修改. 我们只需要在/etc/my.cnf文件中的[mysqld]下面加上一行 skip-grant-tables 如下: 然后使用如下命令重启MySQL服务,不重启是不生效的 syst

  • Python首次安装后运行报错(0xc000007b)的解决方法

    Python首次安装后运行报错(0xc000007b)的解决方法

    错误提示如下: 其实这是一个挺常见的系统报错,缺乏VC++库. 我安装的是python3.5.2,这个版本需要的vc版本是2015的了,下载:Microsoft Visual C++ 2015 安装完后发现就正常了: 总结 通过以上的方法就能轻松解决首次安装Python后运行报错的问题,希望本文的内容对同样遇到这个问题的朋友们能有所帮助,如果有疑问大家可以留言交流,小编会尽快给大家回复.

  • IDEA安装lombok插件设置Enable Annotation Processing后编译依然报错解决方法

    IDEA导入的项目中有依赖lombok的get set注解,build项目时报错:找不到get/set方法. 查找网上资料,安装lombok插件,如图: 安装好插件后,重启IDEA后还是编译报错,又在设置中勾选了Enable Annotation Processing 如下图: 完成了所有这些设置后编译还是报错找不到get/set方法 经过了很多次尝试后 (更换JDK1.8.清空项目缓存等等)发现项目中引用的lombok jar包是1.16版本的,下载了官网的最新jar包并替换后重新编译,编译通

  • 使用MyBatisPlus自动生成代码后tomcat运行报错的问题及解决方法

    自动生成的代码 报错 解决办法:把自动xml文件中自动生成的二级缓存注释掉 总结 到此这篇关于使用MyBatisPlus自动生成代码后tomcat运行报错的问题及解决方法的文章就介绍到这了,更多相关MyBatisPlus自动生成代码tomcat运行报错内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • vue cli3.0 引入eslint 结合vscode使用

    它的目标是提供一个插件化的javascript代码检测工具.官网地址 最近一个项目里,最开始使用 cli3.0 搭建的时候没有默认选用 eslint ,导致现在有的人使用其他编辑器,就会出现格式错乱的情况.所以引入 eslint 做代码检测 第一步 (安装) npm install eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-vue --save-dev 引入关于 eslint 的一些依赖 当你的 pac

随机推荐