[Vue] 4. vue4打包并发布到springboot里面

方式1：vue打包，然后把dist放到后端里打包

Vue-cli版本:4.0

项目结构：

1.配置vue.config.js （没有的话就像上图一样新建一个）

const path = require('path')
module.exports = {
  // 基本路径   整个文件夹在哪
  //publicPath: process.env.NODE_ENV === 'production' ? '/static/' : './',
  publicPath: './',
  // 输出文件目录   文件夹名
  outputDir: 'dists',
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。    资源放的目录
  assetsDir: "public",
  // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径    index的路劲和名字
  indexPath: './m_index.html',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: true,
  // runtimeCompiler: true, // 运行时版本是否需要编译
  transpileDependencies: [], // 默认babel-loader忽略mode_modules，这里可增加例外的依赖包名
  productionSourceMap: false, // 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度
  css: {
    // 配置高于chainWebpack中关于css loader的配置
    // modules: true, // 是否开启支持‘foo.module.css’样式
    // extract: true, // 是否使用css分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用<style>方式内联至html文件中
    // sourceMap: false, // 是否在构建样式地图，false将提高构建速度
    loaderOptions: { // css预设器配置项
      // less: {
      //   loaderOptions: {
      //   data: `@import "@/assets/less/global.less";`
      //   }
      // }
    }
  },
  parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, './src/assets/less/global.less')]
    }
  },
  pwa: {
    // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  },
  devServer: {
    open: true,
    host: '0.0.0.0',
    port: 8081,
    https: false,
    hotOnly: false,
    proxy: null
    // proxy: {

    // }
    // before: app => {}
  }
}

如果网页带路由，需要把main.js注释里面那行删掉，否则会出现net::ERR_FILE_NOT_FOUND   如下

import VueRouter from 'vue-router'
Vue.use(VueRouter)
 
const routes = [
    {path: '/',component: HelloWorld},
    {
      path: '/Hellocopy',
      name: 'Hellocopy',
      component: Hecopy,
      children: [
        {
          path: 'Son1',
          name: 'Son1',
          component:Son1 
        },
        {
          path: 'Son2',
          name: 'Son2',
          component:Son2
        }
      
      ]
    },
    {
        path: '/Test',
        name: 'Test',
        component:Test
    }

]
const router = new VueRouter ({
  routes,
  //mode: 'history' //发布时把这个删掉
})

 

 

 

命令行运行npm run build,生成dists文件夹

留意：此时我们 publicPath: './'  ，端口是8081

也就是说我们springboot访问资源得满足url:端口/资源(xxx.js/xxx.css)的形式

 

那要怎么做呢？

springboot里面设置：

application.yml,配置静态资源路径

resources:
  static-locations: classpath:static/,file:static/

现在static文件夹里的资源可以以  localhost:端口/资源访问了！如下图

所以，我们只要把dist文件夹里的所有内容复制黏贴到static文件夹即可，如上图

但是index.html要另外放到template文件夹里

 

控制类默认是吃template文件夹里的html,代码如下：

 

运行springboot，结果如下：

 

方式2：nginx部署

先参照这个一步步安装nginx

https://www.runoob.com/linux/nginx-install-setup.html

如果你是按照上面安装的nginx，配置/usr/local/webserver/文件夹里的nginx.conf

#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    server {
        listen       9094;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /data/cyzx_ui;
            index  index.html index.htm;
                    try_files $uri $uri/ /index.html;
        }
        location /prod-api/ {
                    proxy_set_header Host $http_host;
                    proxy_set_header X-Real-IP $remote_addr;
                    proxy_set_header REMOTE-HOST $remote_addr;
                    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_pass http://ip:端口/;
       	}
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

不要照搬！！！重点是listen里的端口，是9094 ，这个可以改，意味着我们最后是用ip:9094来访问系统主页

location / 里，root   代表我们dist中的文件要放的位置

然后 location  /prod-api/  最后proxy_pass  里要填的是后端的接口，所以后端部署的端口要跟这个一致就好了。

 

后台你用screen也可以，docker也可以，随便部署

最后访问xxIP:9094/访问登录页面