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


Posted in Javascript onJuly 19, 2019

本文介绍了vue-cli 项目打包完成后运行文件路径报错问题,做个笔记,也分享给大家。

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

刚新建的vue-cli项目,同事说要打包一版进行测试,打包完成后放在tomcat上发现路径报错问题。

百度了一下,怀疑是build里面没有定义路径问题,度友提供了解决方案:

找到config文件夹下的index.js文件,修改路径代码

找到build对象,修改属性assetsPublicPath为 ‘./'

但是由于vue-cli项目中已经没有config文件夹,需要在根目录下创建vue.config.js

具体配置网上查了一下,用了一个推荐的配置:

module.exports = {
 baseUrl: '/',
 outputDir: 'dist',
 lintOnSave: true,
 runtimeCompiler: true, //关键点在这
 // 调整内部的 webpack 配置。
 // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // 配置 webpack-dev-server 行为。
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
  proxy: null, // string | Object
  before: app => {}
 }
}

但是这个配置打包完之后依旧报错,看了原因,是baseUrl: '/'的路径还是有问题,把路径改为baseUrl: './'就能找到对应的路径了,以下为修改后代码:

module.exports = {
 baseUrl: './',
 outputDir: 'dist',
 lintOnSave: true,
 runtimeCompiler: true, //关键点在这
 // 调整内部的 webpack 配置。
 // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
 chainWebpack: () => {},
 configureWebpack: () => {},
 // 配置 webpack-dev-server 行为。
 devServer: {
  open: process.platform === 'darwin',
  host: '0.0.0.0',
  port: 8080,
  https: false,
  hotOnly: false,
  // 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
  proxy: null, // string | Object
  before: app => {}
 }
}

结果:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
Sep 01 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
Vue.js基础知识小结
Jan 13 Javascript
浅谈sass在vue注意的地方
Aug 10 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
vue axios整合使用全攻略
May 24 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
javascript解析json格式的数据方法详解
Aug 07 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 #Javascript
bootstrap Table实现合并相同行
Jul 19 #Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 #Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 #Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 #Javascript
bootstrap table插件动态加载表头
Jul 19 #Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 #Javascript
You might like
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php制作文本式留言板
2015/03/18 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
Vue性能优化的方法
2020/07/30 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
Python函数参数类型*、**的区别
2015/04/11 Python
Python 闭包的使用方法
2017/09/07 Python
python代码实现ID3决策树算法
2017/12/20 Python
python快排算法详解
2019/03/04 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
如何打开WebSphere远程debug
2014/10/10 面试题
大二学生学习个人自我评价
2014/01/19 职场文书
求职自荐信的格式
2014/04/07 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
2015年行政人事工作总结
2015/05/21 职场文书
永远是春天观后感
2015/06/12 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
新手入门Mysql--概念
2021/06/18 MySQL
WCG2010 星际争霸决赛 Flash vs Goojila 1 星际经典比赛回顾
2022/04/01 星际争霸