zoukankan      html  css  js  c++  java
  • Vue笔记:Vue制作个人简历并使用Nginx部署

    一、实现效果

    项目使用Vue3+ElementUI+BootStarp

    Github地址:https://github.com/Angell1/CV

    测试页面:http://123.207.251.121:8888/

    环境:

     

    部署

    1、Vue打包

    npm run build

    注意:我使用vue3,所以自定义配置文件:

    module.exports = {
        publicPath: './',
        outputDir: 'dist',
        devServer: {
        host: '0.0.0.0',
        port: 8080,
        open:true
        }
    }

    通过上面命令后打包好的静态资源将输出到dist目录中。如图所示

     2、Nginx配置如下:

        server {
                listen       8888;#监听8888端口
                server_name  localhost;
    
                    #charset koi8-r;
    
                    #access_log  logs/host.access.log  main;
                    root        html/dist;#vue项目的打包后的dist
    
                location / {
                    try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
                    index  index.html index.htm;
                }
                    #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
                #因此需要rewrite到index.html中,然后交给路由在处理请求资源
                location @router {
                    rewrite ^.*$ /index.html last;
                    }
                    #.......其他部分省略
          }
  • 相关阅读:
    哲学家进餐
    文件系统
    文件读写原理(转)
    数据库join种类
    http与https区别
    数字证书(转)
    B. Rebranding
    扩展欧几里德算法、证明及其应用
    CodeForces 7C Line
    UVALive 7147 World Cup
  • 原文地址:https://www.cnblogs.com/-wenli/p/13818578.html
Copyright © 2011-2022 走看看