浅谈vue项目如何打包扔向服务器
当我们将 vue 项目完成后，面临的就是如何将项目进行打包上线，放到服务器中。我使用的是 vue-cli（simple） 脚手架，所以就讲一下如何将项目进行打包，并放到 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
显然可以看出和我们想要的路径不一致，上面我贴出来的在 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 空白页，另一个是 静态资源路径不正确的问题。
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应用部署到服务器的正确方式
绛旓細1銆椤圭洰鐩綍缁撴瀯杩欐槸鎵撳寘鍚庣殑锛屾墍浠ユ湁 dist 鏂囦欢澶癸紝鎵撳寘鏂瑰紡锛歯pm run build銆2銆亀ebpack.config.js杩欓噷鍙槸涓灏忛儴鍒嗭紝鍥犱负杩欒竟鏈鍏抽敭鐨勫氨鏄 publicPath,涓嬮潰浼氭彁锛岃繖杈瑰彲浠ヨВ鍐抽潤鎬佽祫婧 404 鏃犳硶寮曞叆鐨勯棶棰樸3銆乶pm run build 鎵撳寘鍚庣殑鏂囦欢銆俷pm run build 鎵撳寘鍚庣敓鎴愪竴涓 dist 鏂囦欢澶癸紝杩欓噷闈㈢殑鐩...
绛旓細Vue椤圭洰閮ㄧ讲鍒鏈嶅姟鍣ㄧ殑鏂规硶鏈夊緢澶氱锛岃繖閲屾彁渚涗竴绉嶇畝鍗曠殑鏂规硶锛1. 棣栧厛锛岀‘淇濇偍鐨勬湇鍔″櫒宸茬粡瀹夎浜哊ode.js鍜宯pm銆2. 鐒跺悗锛屼娇鐢╒ue CLI鍒涘缓涓涓柊鐨刅ue椤圭洰銆3. 鎵撳寘Vue椤圭洰锛岀敓鎴恉ist鏂囦欢澶广4. 灏哾ist鏂囦欢澶逛笂浼犲埌鏈嶅姟鍣ㄤ笂銆5. 鍦ㄦ湇鍔″櫒涓婂畨瑁匩ginx鎴栧叾浠朩eb鏈嶅姟鍣ㄣ6. 閰嶇疆Web鏈嶅姟鍣紝浣垮叾鑳...
绛旓細宸ュ叿/鍘熸枡npm鏂规硶/姝ラ1npmrunbuild 2build杩涜涓紝涓鑸繖涓繃绋嬮渶瑕佷竴鐐圭偣鏃堕棿 3鎵撳寘瀹屾垚锛屽彲浠ョ湅鍒版湁鎻愮ずbuildcomplete 4build瀹屾垚鏃跺欏彲浠ュ湪鐩镐腑鍙戠幇澶氫簡涓涓猟ist鏂囦欢澶癸紝閲岄潰鍖呮嫭涓涓猚ss鏂囦欢锛宩s鏂囦欢鍜宨ndex.html 5椤圭洰鏈缁堜笂绾跨殑鍐呭鏄墦鍖呭帇缂╃殑锛屼篃灏辨槸涓婇潰鐨刣ist鏂囦欢锛屾暣涓繃绋嬭繕鏄緢绠鍗曠殑銆6闇瑕佹敞...
绛旓細绗竴姝ラ厤缃 vue.config.js 绗簩姝ヤ慨鏀硅矾鐢憋紝鏀逛负 hash妯″紡 绗笁姝ユ枃浠鎵撳寘,鎵ц浠ヤ笅锛岀洰褰曚腑浼氬嚭鐜颁竴涓猟ist鏂囦欢澶癸紝灏嗘枃浠舵嫋鍒鏈嶅姟鍣ㄧ殑 root 鏂囦欢澶逛腑 绗洓姝ュ彲浠ラ氳繃鍩熷悕杩涜璁块棶 http://www.linlin.run/my-project/index.html#/home
绛旓細1.绗竴姝 鐒跺悗浼氱敓鎴愪竴涓猟ist鐩綍鐨勬枃浠跺す 2.灏哾ist鏂囦欢澶规嫀鍑烘潵锛屾垜鏈湴宸茬粡鎵撳ソlocalhost鏈嶅姟鍣紝浣跨敤IIs鎼缓鐨勶紝濡傛灉鎯宠緭鍏ワ細 localhost:8001/project 鎵撳紑鏂囦欢锛岄渶瑕佸湪index.js鏂囦欢閰嶇疆锛氬浣曡vue椤圭洰鐒跺悗閫氳繃ip鍦板潃璁块棶锛岄渶瑕佸湪package.json閰嶇疆椤瑰姞涓 --host 0.0.0.0 3.build/webpack....
绛旓細姝ラ锛氫竴銆佹壘鍒版枃浠vue.config.js锛屾病鏈夊垯鑷繁鍒涘缓涓涓 浜屻佺紪鍐檝ue.config.js鐨勫唴瀹 涓夈佷慨鏀硅矾鐢辨柟寮忥紝淇敼涓篽ash锛屾枃浠朵綅缃嚜宸辨壘锛寁uecli3涓湪router.ts鏂囦欢涓 鍥涖佹坊鍔犵┖璺敱 鎵惧埌缂栬瘧濂界殑鏂囦欢澶癸紝濡傛灉浣滀负鐙珛椤圭洰锛岀洿鎺ユ嫹璐濆悗鏀惧埌Tomcat閲屽嵆鍙紝濡傛灉鏄斁鍒板彟澶栦竴涓」鐩腑浣跨敤锛屽垯鎷疯礉鍒板叾瀹冮」鐩...
绛旓細涓銆佸墠绔厤缃細鈶犮乺outer閰嶇疆--鎸囧畾璺敱璧峰(鍦ㄥ紑鍙戞ā寮忎腑锛Vue椤圭洰琚斁鍦ㄤ簡webpack閰嶅悎nodeJs鐢熸垚鐨勬湰鍦鏈嶅姟鍣ㄧ殑鏍圭洰褰曪紝浣嗘槸鍦ㄧ湡瀹炴湇鍔″櫒涓紝椤圭洰鑲畾涓嶄細鏀惧湪鏍圭洰褰曪紝鎵浠ヨ鎸囧畾router鐨刡ase)router鎻愬墠鍜屽悗绔晢閲忓ソ椤圭洰閮ㄧ讲鐨勬湇鍔″櫒鏂囦欢澶硅矾寰勨憽銆佺紪璇鎵撳寘閰嶇疆杩涘叆config --> index.jsbuild鈶佷娇鐢╪pm...
绛旓細1銆侀鍏堬紝鐩綍璋冩暣銆傛牴鐩綍鍒涘缓涓や釜鏂囦欢澶筽ackages鍜宔xamples锛屾洿鏀归厤缃」銆傛洿鏀圭洰褰曠粨鏋勫悗锛vue椤圭洰鏄棤娉曞惎鍔ㄧ殑锛屾鏃堕渶鏇存敼閰嶇疆椤广2銆佸叾娆ue.js鎻掍欢銆傚湪packages鏂囦欢澶逛笅鏂板缓index.js鏂囦欢锛岃鏂囦欢浣滀负鏁翠釜鍖呯殑鍏ュ彛鏂囦欢銆3銆佺劧鍚庡鍏ユ祴璇曘傚湪examples鏂囦欢澶逛笅鐨刴ain.js鏂囦欢寮曞叆涓婅堪鐨刬ndex.js鏂囦欢锛屾祴璇...
绛旓細1銆侀棶棰vue-cli 鑴氭墜鏋剁敓鎴愮殑榛樿鎵撳寘閰嶇疆鏂囦欢鎯呭喌涓嬭繍琛 npm run build 鎵撳寘鍚庯紝閮ㄧ讲椤圭洰鑷崇壒瀹氳矾寰勪笅锛氬锛//ip:port/public/springActivity/姝ゆ椂璁块棶锛歨ttp://ip:port/public/springActivity/index.htmlindex.html 鍙互姝ｅ父璁块棶锛屼絾鏄紩鐢ㄧ殑js锛宑ss绛夋枃浠鏈嶅姟鍣ㄥ搷搴斿潎涓404锛屾煡鐪嬪紩鍏ョ殑璧勬簮璺緞濡備笅锛...
绛旓細杩欑偣澶у搴旇閮戒細锛屽啓濂界殑vue椤圭洰鐩存帴 鎵撳寘濂芥斁鍦ㄤ竴杈癸紝澶囩敤銆1.瀹夎cordova鍛戒护琛屽伐鍏 鍓嶆彁鏄細鐢佃剳宸茬粡瀹夎濂絅ode.js 2.鎵撳紑cmd -g浠ｈ〃鍏ㄥ眬瀹夎 楠岃瘉瀹夎鎴愬姛锛氬湪鍛戒护琛屽唴缁х画杈撳叆锛氬嚭鐜颁笅鍥捐〃鏄庡畨瑁呮垚鍔 1.鏂板缓鏂囦欢澶逛綔涓轰綘鐨凙pp鐩綍锛屾闈㈡柊寤轰换鎰忓悕绉版枃浠跺す锛堝缓璁笉瑕佺敤涓枃锛侊紒锛侊級2.浣跨敤鍛戒护琛...
