Vue部署

VUE部署

使用npm打包，进入到项目目录，运行

npm run build

如果提示 npm ERR! missing script: build
则查看package.json

“scripts”: {
“dev”: “vue-cli-service serve”,
“build:prod”: “vue-cli-service build”,
“build:stage”: “vue-cli-service build --mode staging”,
“preview”: “node build/index.js --preview”,
“lint”: “eslint --ext .js,.vue src”,
“test:unit”: “jest --clearCache && vue-cli-service test:unit”,
“test:ci”: “npm run lint && npm run test:unit”,
“svgo”: “svgo -f src/icons/svg --config=src/icons/svgo.yml”,
“new”: “plop” },

使用
npm run build:prod 命令
此时会在生产/dist/的目录，目录下面有

favicon.ico根据项目不同可能不出现。
将/dist目录下的文件移动至服务器tomcat目录下即可。

注意：

1、VUE生产版本跨域
注意在

在网络请求axios类下的withCredentials属性值必须和后台一样

2、逐级点击没有问题，刷新出现404
HTML5 History 模式
官网说明了该问题的原因
在tomcat中进行如下配置
（1）在项目目录下新建WEB-INF目录，WEB-INF和static同级
（2）在WEB-INF下新建web.xml文件，内容如下

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1"
  metadata-complete="true">

  <display-name>Welcome to Tomcat</display-name>
  <description>
     Welcome to Tomcat
  </description>
  <error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
  </error-page>
</web-app>

（3）最关键的一步，重启tamcat，然后可以发现刷新能用了