Vue项目线上部署常见问题

简介: Vue项目线上部署常见问题

出现空白页,丢失资源,路由刷新404等问题

解决办法一般为vue.config.js修改配置,默认配置的路径资源打包后请求不到:

const isProduction = process.env.NODE_ENV === 'production'
module.exports = {
  publicPath: isProduction ? './' : '/'
}

任何放置在 public 文件夹的静态资源都会被复制到 outputDir 对应值的目录下(默认 'dist'),如果用绝对路径来引用,不会被 webpack 处理(资源只存在 1 份);如果用相对路径来引用,会被 webpack 处理,将图片重新打包,并给图片加 hash 值,以便更好的控制缓存。资源会存在 2 份(还有第一条复制的 1 份)。
所以引用 public 文件夹的静态资源建议使用绝对路径,注意配置路径 publicPath 前缀。

// vue
<img :src="`${publicPath}logo.png`">
....
data () {
  return {
    publicPath: process.env.BASE_URL,
  }
}

刷新404是服务端配置问题,而且是使用history路由模式才会有的问题,这里我贴的是Nginx的配置:

location / {
    root   /home/xxx/xxx; # web项目地址
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;  # 这个配置是关键
    
    # $document_root = root = /data/www/webproject

    # 若: try_files $uri $uri/ /crmwap/index.html =404; fall back 如下:
    # $document_root$uri --> $document_root$uri/ -->  $document_root/crmwap/index.html --> nginx 404

    # 若:try_files $uri $uri/ /crmwap/index.html; fall back 如下:
    # $document_root$uri --> $document_root$uri/ --> http://domain.com/crmwap/index.html
}

如果使用hash模式:

location ^~ /xx/
{
  root /home/xxx/webproject;
  index  index.html index.htm;
}

跨域问题,如果服务端为node,可以简单设置下请求头:

app.all('*', (req: any, res: any, next: any) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');
    res.header('Access-Control-Allow-Methods', '*');
    res.header('Content-Type', 'application/json;charset=utf-8');
    next();
});

Nginx反向代理

场景:我只有一个服务器和一个玉米,使用tomcat运行着博客程序(blog.xxx.com),现在我需要在这台服务器上再发布一个前端程序和服务端程序,这时候就需要用到代理。

最终我在这台服务器上有两个程序:blog.xxx.com 和 app.xxx.com ,而后端由于只提供api所以直接发布到一个没到的端口上 app.xxx.com:9999

首先域名DNS解析:app和blog两个主机记录到主机ip,blog还是放在我之前的tomcat服务器跑,只是端口被我改成了8080,接着就是Nginx的配置:

server {
    listen       80;
    server_name  app.xxx.com;

    location / {
        root   /home/xxx/webprojectapp;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}
server {
    listen       80;
    server_name  blog.xxx.com;

    location / {
        proxy_pass http://app.xxx.com:8080;
    }
}

这样访问app.xxx.com就是我发布的程序,而blog.xxx.com则被转发到8080端口。

同样,有更多的项目都可以继续这样部署:

    server {
        listen       80;
        server_name  admin.xxx.com;

        location / {
            root   /home/Web/ProAdmin;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }
    server {
        listen       80;
        server_name  h5.xxx.com;

        location / {
            root   /home/xxx/webprojecth5;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }

玉米解析的都是80端口但是实际访问的二级域名会被转发到相应的项目中去。

相关文章
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
6天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
29 1
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
1月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
JavaScript Java 物联网
现有vue项目seo优化
现有vue项目seo优化
|
JavaScript 前端开发
重读vue电商网站45之项目优化上线
重读vue电商网站45之项目优化上线
138 0
重读vue电商网站45之项目优化上线
|
1月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
38 1
vue学习第一章
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
30 1