nodeJS+vueCLE3+java服务器爬坑之旅

网上说VueCLE3在开发模式啥啥都嘎嘎好使，生产模式啥啥都嘎嘎不好使，
果然如此，坑爹玩意…………

一.前端项目编译后放入后端项目目录打war包完成部署

（1）.首先是解决静态资源里面报各种各样的请求错误。
为了解决上述问题可以分别为开发模式、生产模式设置不同请求路径，在根目录上建立三个.文件，

1. 创建普通全局变量 .env
2. 创建开发环境变量 .env.development
3. 创建生产环境变量 .env.production
   
   在axios请求接口时，可以使用环境变量作为URL
   
   1、注意：npm run serve开发环境下默认选中.env.development
   2、注意：npm run build 命令运行时 系统则会使用 .env.production

（2）.设置部署应用包时的基本 URL。
从 Vue CLI 3.3 起已弃用baseUrl，请使用publicPath。
默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。
本例应用部署到根目录中。

前端项目中的调用的图片路径放在public中，如图

Vue页面中调用图片时候的路径可以统一设置为为/static//.png
（3）这里有一个技巧可以使用，在引用less样式文件时，可以在vue.config.js中配置公用common.less，无需在每个.VUE文件中单独import.
1.首先安装 style-resources-loader
npm i style-resources-loader -D
2.在vue.config.js中添加

# vue.config.js
const path = require('path')
module.exports = {
  // ...
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
  },
  // ...
}

function addStyleResource (rule) {
  rule
    .use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        // 需要全局导入的less
        path.resolve(__dirname, '/static/less/Common.less')
      ]
    })
}

这样你可以在任意vue文件中使用Common.less中的变量。
（4）npm run build后dist文件夹，将里面的index.html以及static中的东东统统放入后端项目指定的位置。


（5）别轻松的以为这样打出WAR包，就万事大吉了，其实困境才刚刚开始，由于咱们这个是shiro的权限系统，需要在application.yml配置巴拉巴拉一些东西。

1. 配置静态文件路径：
   
2. 配置首页位置
   
3. 配置shiro免认证路径，尤其是静态文件路径
   
   最后写一个index的controller即可，
   千万不要忘记使用@Controller而不要使用@RestController，太坑了！！！！

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

//@Validated
@Controller
public class IndexController {
    @RequestMapping("/")
    public String index(){
        return "/index";
    }
}

最后在idea中打成war包。

这里切记是war包，不是jar包。
最最最……后塞到tomcat里面就OK啦，放到webapps中，修改为ROOT.war

重启，部署完成。

二.前端项目编译放入nginx部署

未完待续………………