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

 更新时间:2019年07月19日 10:51:58   作者:柴门闻犬吠  
这篇文章主要介绍了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实现登录后页面跳转到之前页面

    vue实现登录后页面跳转到之前页面

    本文给大家分享了vue实现登录后页面跳转到之前页面的一个功能,有这方便需要的朋友学习参考下吧。
    2018-01-01
  • vue+axios+element ui 实现全局loading加载示例

    vue+axios+element ui 实现全局loading加载示例

    今天小编就为大家分享一篇vue+axios+element ui 实现全局loading加载示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 基于VUE实现判断设备是PC还是移动端

    基于VUE实现判断设备是PC还是移动端

    这篇文章主要介绍了基于VUE实现判断设备是PC还是移动端,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 如何解决Element UI el-dialog打开一次后无法再次打开问题

    如何解决Element UI el-dialog打开一次后无法再次打开问题

    这篇文章主要介绍了如何解决Element UI el-dialog打开一次后无法再次打开问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue项目中使用AvueJs的详细教程

    vue项目中使用AvueJs的详细教程

    Avue.js是基于现有的element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景,这篇文章给大家介绍了vue项目中使用AvueJs的相关知识,感兴趣的朋友跟随小编一起看看吧
    2022-10-10
  • vue实现简单的计算器功能

    vue实现简单的计算器功能

    这篇文章主要为大家详细介绍了vue实现简单的计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • Nuxt 项目性能优化调研分析

    Nuxt 项目性能优化调研分析

    这篇文章主要介绍了Nuxt 项目性能优化调研分析,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue+Element实现网页版个人简历系统(推荐)

    Vue+Element实现网页版个人简历系统(推荐)

    这篇文章主要介绍了Vue+Element实现网页版个人简历系统,需要的朋友可以参考下
    2019-12-12
  • Vue中的作用域CSS和CSS模块的区别

    Vue中的作用域CSS和CSS模块的区别

    这篇文章主要介绍了Vue中的作用域CSS和CSS模块的区别,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • vue中i18n的安装与几种使用方式详解

    vue中i18n的安装与几种使用方式详解

    在一些网站经常可以看到切换语言包,将网站转化成多种语言版本的情况,下面这篇文章主要给大家介绍了关于vue中i18n的安装与几种使用方式的相关资料,需要的朋友可以参考下
    2022-09-09

最新评论