郑州网站建设 seo,手机制作表格的软件免费,广告素材网站哪个比较好,网页设计模板的结构当我们将 vue 项目完成后#xff0c;面临的就是如何将项目进行打包上线#xff0c;放到服务器中。我使用的是 vue-cli#xff08;simple#xff09; 脚手架#xff0c;所以就讲一下如何将项目进行打包#xff0c;并放到 tomcat 上。 如果是 vue-cli (非 simple 脚手架…当我们将 vue 项目完成后面临的就是如何将项目进行打包上线放到服务器中。我使用的是 vue-clisimple 脚手架所以就讲一下如何将项目进行打包并放到 tomcat 上。 如果是 vue-cli (非 simple 脚手架)这篇文章可能有点帮助。地址链接vue-cli 如何打包上线 先来描述一下期间遇到的问题有哪些
1、打包后将 dist 文件夹和 index.html 放到 tomcat在浏览器中访问时出现空白页f12 提示 404。 2、打包好的静态资源均是绝对路径无法引入进项目也是 404。
1、项目目录结构 这是打包后的所以有 dist 文件夹打包方式npm run build。
2、webpack.config.js 这里只是一小部分因为这边最关键的就是 publicPath,下面会提这边可以解决静态资源 404 无法引入的问题。
3、npm run build 打包后的文件。
npm run build 打包后生成一个 dist 文件夹这里面的目录 我对 webpack 打包工具的原理不是很清楚所以文件夹应该生成什么不是了解。我这边是这样子的。主要是一个主要的 build.js, 因为我们的 index.html 引入的就是这个 js 文件。还有一些图片文件和 ElementUI 生成的 ttf 和 woff。
4、如何放到服务器中。
接下来就是需要将生成的 dist 文件夹和 index.html 文件放到服务器中只需要这两个。首先我将这两个文件放在同一个文件夹中我命名为 gas随意。 然后将文件夹放到 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
1
显然可以看出和我们想要的路径不一致上面我贴出来的在 tomcat 的文件目录中我将 dist 和 index.html 都放进了一个 gas 的文件夹中。所以正确的路径应该是这样的
http://10.0.0.181:8088/gas/dist/bg.png?fe9b889cea51978538ce352593be0573
1
看出区别了吗
解决
所以我需要改变一下 webpack.config.js 中的输出路径 publicPath: /gas/dist/。将最外层的文件夹路径加进去这样就可以将静态资源引入进项目了。
ok,到现在为止最主要的两个问题解决了一个是 index.html 空白页另一个是 静态资源路径不正确的问题。
6、index.html 页面中的link 和 srcipt 引用的资源失效问题
原因还是路径的地址不对
妥协的解决方法是将自己引用的资源手动放到打包出来的 dist 文件夹内然后在 index.html 中按照 dist 的相对路径进行引用。 代码中的 icon.ico 就是我手动将 icon 图标放到 dist 文件夹中然后按照对应的引用路径进行引用。其他的 css 和 js 引用一样。
7、待解决的问题
1、在我的项目中使用了 ElementUI 框架但是在打包放到服务器中后发现按钮样式变了所有的 padding 失效所有我只能自己手动进行添加样式。
2、在我的 index.html 中如果引入 link css文件时还是没办法引入相对路径所以我将 css 样式都放到了各自的组件中的 style 中了其他的一般都是用 npm 注入依赖的形式进行安装。
8、网上搜索到的相关问题和解决方法。
1、求助Vue项目用Webpack打包后放到服务器上但访问是空白页弄了好久了也不知道什么原因
2、vue项目中npm run build生成的index.html文件只有放在根目录下打开才能生效怎么解决
3、Vue应用部署到服务器的正确方式
