代码拉取完成,页面将自动刷新
同步操作将从 Baymax/by-vue-blog 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
网站前端源码:https://gitee.com/baymaxsjj/by-vue-blog
网站后端源码:https://gitee.com/baymaxsjj/by-laravel-blog
Vue版本:2.6.12,Laravel版本:7.0 1.Vue 多页面配置,一个项目包括前后端,
2.采用Element UI编写前后台
3.完成模块:
前台:首页介绍,文章展示,标签展示,分类展示,文章解析,生成目录,运行demo,模块显示,留言评论,友情链接,登录,注册,找回密码,第三方登录(QQ,GITEE,GITHUB),
后台:发表文章(模块管理,多平台发布,提交百度收录),文章列表,用户管理,友情链接,项目管理,成长路线,留言管理,网站公告,首页轮播,音乐管理,
4.项目配置:前后台分开打包,按需加载,动态路由,gizp压缩,去除生产环境的console.log,反向代理,cdn引入,服务器自动拉取代码打包编译脚本
npm install
npm run serve
npm run build
在package.json中配置
"scripts": {
"serve_home": "vue-cli-service serve --home",
"build_home": "vue-cli-service build --home",
"serve_admin": "vue-cli-service serve --admin",
"build_admin": "vue-cli-service build --admin "
},
在vue.config.js配置
//开发生产环境判断:true为生产环境
const IS_PROD = process.env.NODE_ENV === 'production';
//获取在package.json 编译或运行获取自定义的配置名称
let appName = process.argv.slice(0)[3].replace('--', '');
//编译输出名称
let outputPath = appName === 'home' ? 'home' : 'admin'
// 由于部分插件,导致ie下空白
transpileDependencies: ['vue-savedata', 'vue-baberrage'],
//运行目录:开发环境:都在根目录。生产环境,前台在根目录,后台在子目录下运行
publicPath: IS_PROD ? outputPath == 'home' ? '/' : '../' + outputPath + '/' : '/',
// 输出目录,
outputDir: '../' + outputPath,
//多页面配置
pages: {
//此处因为要前后台分开打包,所以要注释
// about: {
// entry: 'src/pages/admin/main.js',
// template: 'public/admin.html',
// filename: 'admin.html',
// chunks: ['chunk-vendors', 'chunk-common', 'about'],
// title: 'BAYMAX后台管理'
// },
index: {
entry: 'src/pages/' + appName + '/main.js',
template: `public/${appName}.html`,
filename: 'index.html',
chunks: ["chunk-vendors", "chunk-common", "index", 'runtime~index'],
title: appName === 'home' ? '云墨白的博客-Start with Hello World' : 'BAYMAX后台管理'
}
},
由于项目使用到第三方的接口需要反向代理
devServer: {
sockHost: "localhost",
disableHostCheck: true,
port: 8080, // 端口号
host: "0.0.0.0",
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
proxy: {
//后台接口
"/apis": {
// target: "http://127.0.0.1:80/api/v1", // 需要请求的地址
target: process.env.VUE_APP_API_URL, // 需要请求的地址
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/apis": "" // 替换target中的请求地址,也就是说,在请求的时候,url用'/proxy'代替'http://ip.taobao.com'
}
},
//音乐接口
"/music": {
target: "https://music.liuzhijin.cn", // 需要请求的地址
// target: process.env.VUE_APP_URL, // 需要请求的地址
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/music": "" // 替换target中的请求地址,也就是说,在请求的时候,url用'/proxy'代替'http://ip.taobao.com'
}
},
//每日英语接口
"/english": {
target: "http://sentence.iciba.com", // 需要请求的地址
// target: process.env.VUE_APP_URL, // 需要请求的地址
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/english": "" // 替换target中的请求地址,也就是说,在请求的时候,url用'/proxy'代替'http://ip.taobao.com'
}
},
"/loimg": {
target: "https://pc-store.lenovomm.cn/wallpapercontent/wallpaper/classify/tag_wallpapers", // 需要请求的地址
// target: process.env.VUE_APP_URL, // 需要请求的地址
changeOrigin: true, // 是否跨域
pathRewrite: {
"^/loimg": "" // 替换target中的请求地址,也就是说,在请求的时候,url用'/proxy'代替'http://ip.taobao.com'
}
}
}
},
location /apis {
proxy_pass 自己后端域名;
}
location /vendor/sitemap/styles/xml.xsl {
proxy_pass https://api.yunmobai.cn/vendor/sitemap/styles/xml.xsl;
}
location /music {
proxy_pass https://music.liuzhijin.cn/;
}
location /english {
proxy_pass http://sentence.iciba.com/;
}
echo 同步远程仓库
git pull
echo 编译主页
npm run build_home
echo 删除源文件
rm -r ../js ../css ../img ../fonts
echo 拷贝主页
cp -rf ../home/. ../
echo 删除编译文件
rm -r ../home ../admin.html
echo 完成
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。