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

Carson 发布于2019-08-23 18:41 / 3391人阅读

摘要：刚新建的项目，同事说要打包一版进行测试，打包完成后放在上发现路径报错问题。查阅配置代理但是这个配置打包完之后依旧报错，看了原因，是的路径还是有问题，把路径改为就能找到对应的路径了，以下为修改后代码关键点在这调整内部的配置。

刚新建的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 => {}
  }
}

结果：

混合云 idc机房托管 svn服务器搭建完成后如何访问项目更新后的项目js报错完成后安装完成后

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105673.html

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

摘要：刚新建的项目，同事说要打包一版进行测试，打包完成后放在上发现路径报错问题。查阅配置代理但是这个配置打包完之后依旧报错，看了原因，是的路径还是有问题，把路径改为就能找到对应的路径了，以下为修改后代码关键点在这调整内部的配置。 showImg(https://segmentfault.com/img/bVbu4Zu?w=1600&h=789); 刚新建的vue-cli项目，同事说要打包一版...

wthee 2019-08-05 17:37 评论0 收藏0
vue-cli+webpack开发流程总结

摘要：加载百度地图后报错的，我们再加载一遍你的秘钥你的秘钥为当前时间戳获取方法一、环境搭建 1、安装node.js在计算机中https://nodejs.org/en/download/ （此为node.js官方下载地址）安装完成后打开cmd命令提示符 node -v //查询node版本号 npm -v //查询npm版本号 2、如果npm使用网速跟不上...

shiweifu 2019-08-23 14:55 评论0 收藏0
Vue打包注意事项

摘要：在使用进行项目打包时，发现了一些以前没注意到的点，因此写下此文，记录一下，如果可以对大家有所帮助，那就更好了。原因中默认打包后创建文件，以提醒开发人员错误位置。解决方式图片描述打开项目根目录下的文件，找到将这个参数改为即可。在使用vue-cli进行项目打包时，发现了一些以前没注意到的点，因此写下此文，记录一下，如果可以对大家有所帮助，那就更好了。 1.直接使用npm run buil...

felix0913 2019-08-23 13:00 评论0 收藏0
vue经过vue-cli打包后本地打开页面资源加载报错，页面空白

摘要：修改完毕后再次打包，页面还是空白页，打开控制台，也没有抱任何错误，查看元素，资源路径也是正确的，如图右侧红框再次陷入崩溃，控制台无任何报错，于是就去各大网站找相关文章，好在一篇文章提到的模式。由于对脚手架这些东西，运用不是太熟，所以在打包项目时遇到一些小坑，在此做一下小结：首次打包完毕，在本地打开dist下的入口页面index.html时，页面展示了一个大大的空白，打开控制台显示未发...

whatsns 2019-08-23 17:06 评论0 收藏0
五步带你完成vue-cli 项目打包一键部署（测试）服务

摘要：初始化项目测试服务已经准备前提已经准备好了注意一键部署都可以使用在根目录新建文件夹类容如下类容如下文件类容如下正在发布到生产测试服务器这个路径是你需要上传到服务器的文件夹路径发布失败成功发布到生产测试服务器文件类容如下读取环境变量文件判断打初始化vue项目, 测试服务已经准备（前提已经准备好了）注意: 一键部署 vue2.0~3.0 都可以使用 1、在根目录新建deploy 文件...

cgh1999520 2019-08-23 16:54 评论0 收藏0