方式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/访问登录页面