Vue.js 生产打包上线实战

清雨未尽时

已于 2023-03-11 09:57:11 修改

阅读量986

点赞数

文章标签： vue.js 前端 javascript

于 2023-03-10 16:36:38 首次发布

本文链接：https://blog.csdn.net/kangguang/article/details/129444692

版权

文章讲述了在Vue.js项目管理后台开发完成后，如何进行打包上传到服务器，并解决在Tomcat中部署时的跨域问题。关键步骤包括打包配置、axios的baseURL调整以及使用Nginx作为反向代理来解决跨域错误。

摘要由CSDN通过智能技术生成

项目管理后台采用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:'../../' ，否则刷新页面会出现白板的问题。

到此，全部完成，是不是很简单！