vue项⽬搭建及打包最全实战教程
vue的项⽬可以通过webpack⼿动配置，但⼀般项⽬都是通过vue cli （脚⼿架）来快速搭建。下⾯就来详细讲解vue cli怎么搭建vue项⽬。⼀、⾸先你得下载安装好node，并配置好npm，以及下载安装好Git
版本要求：node.js  =>  6.x ,8.x以上更好      链接：node官⽅
npm =>  3.0+  npm官⽅⽹站
git  =>  1.0+（⽬前最新2.18） git官⽅下载
注：在安装node的过程中同时也⾃动带有npm
配置好这些环境后 ，你可以通过git 或者 cmd （终端）查看当前node和npm是否安装成功
通过命令⾏  node -v  /  npm -v 查看当前版本
如上图所⽰则表⽰node npm 环境配成功
⼆、开始搭建vue⼯程
2.搭建webpack环境，全局安装
cnpm install webpack -g
3.安装vue-cli
⾸先你可以通过命令⾏cd 进⼊你的项⽬  如我的是d盘 vue-demo ⽂件夹
然后 cnpm install -g vue-cli
webpack打包流程 面试
4.通过webpack构建项⽬
vue init webpack my-project  //项⽬名称 ⾃⼰随便取
后⾯的⼀直回车就⾏,vue-loader Y 其他随意
、5.cd 进项⽬ 命令⾏npm install 安装vue依赖的包
⽣成⽬录如下：
6.搭建好之后命令⾏ npm run dev  运⾏vue⽂件
注：因为vue项⽬监听的是8080端⼝，请确保本机8080端⼝没被禁⽤
这⾥需要⼿动在浏览器打⽹址，解决这个问题让vue项⽬直接npm run dev之后⾃动在浏览器打开仅需要打开vue⼯程，将config -> index.js ->dev 对象中的 autoOpenBrowser属性设置为true就⾏，如图：
7.vue项⽬码好后打包 npm run build  通过Tomcat等推到服务器就⾏
以下是解决打包后的问题：
1、打包后将 dist ⽂件夹和 index.html 放到 tomcat，在浏览器中访问时，出现空⽩页，f12 提⽰ 404。
2、打包好的静态资源均是绝对路径，⽆法引⼊进项⽬，也是 404。
1、项⽬⽬录结构
这是打包后的，所以有 dist ⽂件夹，打包⽅式：npm run build。
2、fig.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、解决空⽩页和静态资源⽆法引⼊的问题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。