浦东新区建设机械网站,多人在线网站开发,简阳建设厅官方网站,做展示网站项目管理后台采用Vue.js 架构#xff0c;开发完毕后设计到打包上传到服务器发布。
发布成功后#xff0c;总结出主要要决绝两个主要问题#xff1a;
1.打包前#xff0c;环境设置
2.上传到服务器#xff0c;直接放在Tomcat中出现跨域访问问题。
此次项目实际处理方法为…项目管理后台采用Vue.js 架构开发完毕后设计到打包上传到服务器发布。
发布成功后总结出主要要决绝两个主要问题
1.打包前环境设置
2.上传到服务器直接放在Tomcat中出现跨域访问问题。
此次项目实际处理方法为
一、打包
有人说需要再config文件夹中index.js中 所以
assetsPublicPath: /, 改为
assetsPublicPath: ./,
其实这是不需要的因为生产环境打包时这里根本不会包含进入这里只用于本地开发环境vue.js本地产生的服务用于跨域转发解决跨域访问产生的问题。
module.exports {dev: {// PathsassetsSubDirectory: 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;charsetutf-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:../../ 否则刷新页面会出现白板的问题。
到此全部完成是不是很简单
