专栏首页小蔚记录vue ---webpack 打包上线

vue ---webpack 打包上线

先来描述一下期间遇到的问题有哪些:

  1、打包后将 dist 文件夹和 index.html 放到 tomcat,在浏览器中访问时,出现空白页,f12 提示 404。   2、打包好的静态资源均是绝对路径,无法引入进项目,也是 404。

1、项目目录结构

  这是打包后的,所以有 dist 文件夹,打包方式:npm run build

2、webpack.config.js

3、npm run build 打包后的文件。

npm run build 打包后生成一个 dist 文件夹,这里面的目录

4、如何放到服务器中。

  1.接下来就是需要将生成的 dist 文件夹和 index.html 文件放到服务器中,只需要这两个。首先我将这两个文件放在同一个文件夹中,我命名为 gas(随意)。

  2.然后将文件夹放到 tomcat 中,我将文件夹放到 tomcat 的 webapps 文件夹目录下:

  ok 部署完成,启动 tomcat,你会发现显示一个空白页,一些静态资源都是 404。

5、解决空白页和静态资源无法引入的问题。

  1、首先空白页的问题,可以重 f12 中看出来都是绝对路径的原因,而我们打包后,应该的引入路径是相对路径,这时我们需要的是修改 index.html 页面。

    看一下没改之前的:

    看我 /dist/build.js 引用的是绝对路径,这就导致了在 tomcat 去访问 index.html 页面时,报404。我们需要将路径变成相对路径 ./dist/build/。多一个点,很关键。好了到这里应该主页面可以显示了。

    但是你会发现,我的静态资源,我的图片(不包括 img 形式的引入),例如我在 css 中 background:url() 的图片显示404。

  2、解决静态资源失效的问题

    这就需要修改我们的 webpack.config.js 中的 publicPath 了,默认的 vue-cli 脚手架环境搭建好后,publicPath 是这样的:

  可以看到我们的路径是: /dist/。所以这时候我们如果打开页面,静态资源的路径都会是这样子的,并且报错404:

    http://10.0.0.181:8088/dist/bg.png?fe9b889cea51978538ce352593be0573

  显然可以看出和我们想要的路径不一致,上面我贴出来的在 tomcat 的文件目录中我将 dist 和 index.html 都放进了一个 gas 的文件夹中。所以正确的路径应该是这样的:

    http://10.0.0.181:8088/gas/dist/bg.png?fe9b889cea51978538ce352593be0573

看出区别了吗!

解决:

所以我需要改变一下 webpack.config.js 中的输出路径 publicPath: /gas/dist/。将最外层的文件夹路径加进去,这样就可以将静态资源引入进项目了。

ok,到现在为止,最主要的两个问题解决了,一个是 index.html 空白页,另一个是 静态资源路径不正确的问题。

  原因还是路径的地址不对:

  妥协的解决方法是:将自己引用的资源手动放到打包出来的 dist 文件夹内,然后在 index.html 中按照 dist 的相对路径进行引用。

  代码中的 icon.ico 就是我手动将 icon 图标放到 dist 文件夹中,然后按照对应的引用路径进行引用。其他的 css 和 js 引用一样。

7、待解决的问题:

  1、在我的项目中,使用了 ElementUI 框架,但是在打包放到服务器中后,发现按钮样式变了,所有的 padding 失效,所有我只能自己手动进行添加样式。

  2、在我的 index.html 中如果引入 link css文件时,还是没办法引入相对路径,所以我将 css 样式都放到了各自的组件中的 style 中了,其他的一般都是用 npm 注入依赖的形式进行安装。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ajax嵌套ajax 可能出现问题 的解决办法

    ajax由于他的异步特性 在第一次请求中的循环中嵌套第二个ajax会数据会读不出来

    小蔚
  • vue -- 7 个 有用的 Vue 开发技巧

    随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用...

    小蔚
  • vue 引入第三方字体包

    1.创建 style_css 文件夹,在当前文件夹下 新建 index.css 和 引入字体包。

    小蔚
  • Xamarin 构建安卓失败 因为路径太长

    如果在你构建 Xamarin 安卓的时候看到如以下提示,那么请你确定以下你的应用程序路径是不是超过 250 个字符了

    林德熙
  • Vue Cli 3 搭建一个可按需引入组件的组件库架子

    babel-plugin-component 就是 Element UI 用来实现组件按需加载的一个 babel 插件。我们把它用到我们的组件库上,就不需要重新...

    stys35
  • Python统计Excel文件中超市营业额明细数据

    已知文件“超市营业额.xlsx”中记录了某超市2019年3月1日至5日各员工在不同时段、不同柜台的销售额。部分数据如图所示:

    Python小屋屋主
  • atsf4g完整游戏工程示例

    近期仍然在搭建完整的游戏服务器架构。基于atsf4g(asynchronously-tree server framework fo game)的完整解决方案终...

    owent
  • Typora 在 windows 下图片的保存设置

    在使用Typora编写markdown格式的时候,我有个痛点问题。就是在windows下,我保存的图片和文档不方便拷贝到其他电脑。

    Devops海洋的渔夫
  • 美俄科学家联合运用神经网络研制抗癌药物

    据俄罗斯物理技术研究所报道,莫斯科物理技术学院(MOSCOW INSTITUTE OF PHYSICS AND TECHNOLOGY,MIPT)、InSilic...

    人工智能快报
  • Linux学习笔记(三)文件和文本的查看

    本专栏由小雨ttt创建,致力于分享学习Linux基础知识的过程。本专栏不是机械地介绍Linux指令集,而是包含了作者亲自实践的操作过程,站在一个初学者的角度理解...

    小雨编程

扫码关注云+社区

领取腾讯云代金券