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 相关文章推荐
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
jQuery中extend函数详解
Feb 13 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
解决layer.open后laydate失效的问题
Sep 06 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
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
使用array_map简单搞定PHP删除文件、删除目录
2014/10/29 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP strcmp()和strcasecmp()的区别实例
2016/11/05 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
jquery实现心算练习代码
2010/12/06 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
python+opencv轮廓检测代码解析
2018/01/05 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python读取stdin方法实例
2019/05/24 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
几道PHP的面试题
2012/05/19 面试题
C#基础面试题
2016/10/17 面试题
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
企业负责人任命书
2014/06/05 职场文书
期中考试复习计划
2015/01/19 职场文书
会计简历自我评价
2015/03/10 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书