Vue项目从创建到部署

前言：项目开发在window平台，部署在tomcat服务器，使用开发工具为webstorm工具。

第一步：在window上安装Node.js。

Node官网下载Node（链接地址: https://nodejs.org/zh-cn/download/）。

然后选择安装路径，再然后一路Next。

然后验证是否安装成功。

第二步：配置Node的node_global和node_cache。

首先设置用户变量：将用户变量中 PATH 的值改成 D:\Program Files\nodejs\node_global，没有PATH，可以直接添加。

系统变量设置：添加变量 NODE_PATH  值为：D:\Program Files\nodejs\node_modules

然后在Nodejs目录下创建node_global和node_cache文件夹。

打开cmd设置node_global和node_cache位置。

执行npm install express –g，查看node_global 文件夹是否包含express文件夹验证效果。

第三步：配置cnpm和安装webpack和vue-cli

执行：npm install -g cnpm --registry=https://registry.npm.taobao.org用淘宝npm镜像代替npm。

安装webpack：cnpm install -g webpack

安装vue-cli：npm install --global vue-cli

第四步：在webstorm中创建vue项目。

New project----vue.js----

Location:项目的路径。

Node interpreter：node的安装路径。

Vue-cli：vue-cli的安装路径。

Project template:选择webpack。

然后设置项目名，再然后一路next。

第五步：在webstorm中运行和打包项目。

在webstorm运行项目。打开左侧npm，双击项目中dev。

访问网址，结果如下图。

打包项目。修改config中index.js文件的assetsPublicPath和productionSourceMap配置。

assetsPublicPath: './',

productionSourceMap: false,

双击npm中的build，在项目文件夹下中dist文件夹生成static文件夹和index.html。

把这些文件拷贝到tomcat的webapps中项目目录中。

启动tomcat。

然后访问index.html就大功告成。