项目管理后台采用Vue.js 架构,开发完毕后设计到打包上传到服务器发布。
发布成功后,总结出主要要决绝两个主要问题:
1.打包前,环境设置
2.上传到服务器,直接放在Tomcat中出现跨域访问问题。
此次项目实际处理方法为:
一、打包
有人说需要再config文件夹中index.js中 所以
assetsPublicPath: '/', 改为
assetsPublicPath: './',
其实这是不需要的,因为生产环境打包时,这里根本不会包含进入,这里只用于本地开发环境,vue.js本地产生的服务用于跨域转发,解决跨域访问产生的问题。
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/zpin/*':{
// 本地开发环境设置
// target:'http://localhost:8081',
// 本地开发环境连接服务器生产环境
target:'http://www.yi********.com:8081',
changeOrigin:true,
pathRewrite:{
'^/zpin': '/zpin'
}
}
},
包括在build 文件中的 uils.js 中 添加
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
// 这里是不需要添加的,除非你对默认目录做了大的修改
// publicPath:'../../',
fallback: 'vue-style-loader'
})
}
如果你在最后和跨域问题一并解决后,其实只需要更改一处,就是修改axios库的baseurl地址即可,我的设置文件是这样的
let base = ''//本地测试环境
let base = 'http://besu.******.com'//打包前设置
export const postRequest = (url, params) => {
return axios({
method: 'post',
url: `${base}${url}`,
data: params
})
}
export const putRequest = (url, params) => {
return axios({
method: 'put',
url: `${base}${url}`,
data: params
})
}
修改完成后直接 npm run build 进行打包
打包完成后用FileZilla 上传到服务器存放目录中,至此打包完成,发布完成。
二、解决跨域错误
如果你不用Nginx做反向代理的话,无论你前端是这样的设置
axios.defaults.withCredentials = true
axios.defaults.headers = {
'Content-Type': 'application/json;charset=utf-8',
'Access-Control-Allow-Credentials': 'true',
'Access-Control-Allow-Origin': `http://www.*******.com`,
'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, DELETE, PUT',
'Access-Control-Allow-Headers': 'x-requested-with, Content-Type, origin, authorization, accept, client-security-token'
}
还是后台进行跨域设置,短时间内很难解决,出现错误多多,要想快速轻松解决,就必须用Nginx做反向代理。
Nginx配置文件设置内容为:
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
//网站
server {
listen 80;
server_name www.*******.com;
#server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /usr/local/tomcat/webapps/ymys;
index index.html index.htm;
}
}
//管理后台
server {
listen 80;
server_name besu.*****.com;
location / {
root /usr/local/ymysweb/dist;
index index.html customer.html media.html;
}
#跨域 ip和port自行替换
location /zhpin {
proxy_pass http://101.200.12.18:8081;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
编辑完毕保存后 nginx -s rolad 既可生效
在浏览器中数据访问地址,成功进入登录页面,登录有各个页面接口请求不再有跨域及其他错误。
切记在build 文件中的 uils.js 中不要添加 publicPath:'../../' ,否则刷新页面会出现白板的问题。
到此,全部完成,是不是很简单!