首先得准备一台服务器 （阿里云、腾讯...）选CentOS 8 以下
部署宝塔
yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh
安装以下环境
前端项目打包
npm run build前的准备
打开config/index.js
修改俩处assetsPublicPath: './' 不然部署项目会出现白屏或者找不到文件
解决跨域问题
修改target 需要跨域的域名
proxyTable: {
'/api': {
target:'http://xxx.com:8081/ //要跨域的域名
changeOrigin:true, //是否跨域
pathRewrite:{ // 路径重写，
'^/api': '' // 替换target中的请求地址，也就是说/api=target
}
}
}
需要访问xxx.com:8001 target代替即可
修改存储全局域名变量
这里用的vuex来存储
import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);
const state = {
baseUrl: 'http://xxx.com:8081,
};
前端到这里也就差不多了 可以打包带走了
npm run build
使用了elementUi 还得再改一改
打开bulid/util.js
添加一段publicPath:'../../' 也可以复制粘贴把注释去掉
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
// publicPath:'../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
vue打包完成之后会出现一个dist的目录（保护好）
回到宝塔新建一个文件夹 ，路径自己看着办吧 我是放在了
将打包好的vue项目上传到新建的文件夹
修改Nginx配置安装了宝塔可以直接在软件商店修改 记得备一份
修改
listen 80; //记得要开放这个端口
server_name xxx.com;
添加
location / {
root /www/wwwroot/vue_bua/dist; //这里就是上传dist的路径必须要绝对路径
index index.html index.htm; //定位到root/index.html
#开启后不会导致刷新白屏
try_files $uri $uri/ /index.html;
}
这时候前端项目也就部署好了 访问xxx.com 就有效果了
如果出现白屏 把下面的代码注释掉
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
expires 30d;
}
location ~ .*\.(js|css)?$
{
expires 12h;
}
location ~ /\.
{
deny all;
}
//效果后自己可以写个缓存策略
部署后端
在宝塔新建一个站点
域名记得写端口 xxx.com:8081 也要开放这个端口 (8081是我乱掰的)
在你站点目录下上传thinkphp项目 如果项目过大建议压缩zip上传
然后配置站点 点击设置 找到网站目录 修改运行目录
如果你在thinkphp没改运行目录也就是public/
还得改一下伪静态,这时候宝塔已经准备好了,选一下thinkphp就可以了
当然也可以复制粘贴
location / {
if (!-e $request_filename){
rewrite ^(.*)$ /index.php?s=$1 last; break;
}
}
OK!!! 这就到最后一步了
回到修改Nginx配置 添加一项
location /api {
proxy_pass http://xxx.com:8081//后端端口 因为在同一服务器上所以同域不同端口 也就是站点域名
proxy_set_header Host $host;
proxy_connect_timeout
}
访问前端 : xxx.com:80 //80可忽略
访问后端 : xxx.com:8081
