美文网首页
vue部署到nginx

vue部署到nginx

作者: SunnyCyx | 来源:发表于2020-11-23 16:55 被阅读0次

    nginx

    1、安装nginx
    2、到nginx的安装目录下使用 start nginx启动nginx服务
    3、nginx的主配置文件在/conf/nginx.conf
    4、修改vue项目里的vue.config.js的配置文件

    • 添加publicPath选项,根据你需要部署的路径来进行设置。
    // 值根据你所需要部署的项目路径来,如果是根目录,只需要修改成/即可
    module.exports = {
      publicPath: '/testWeb/'
    }
    

    5、打包部署文件
    6、将打包部署后的文件放在nginx/html目录下
    7、修改nginx的配置文件

    location / {
         root   html/dist; // 指向vue目录
         index  index.html index.htm; // index指向 html/dist/index文件
         try_files $uri $uri/ /index.html;
    }
    location /testWeb { // 这里的testWeb与4中所配置的路径一致
        alias html/testWeb;// 指向vue目录
        index index.html index.html;// index指向html/testWeb/index.html文件
        try_files $uri $uri/ /testWeb/index.html;
    }
    

    try_files:当用户请求 http://localhost/example 时,这里的 uri 就是 /example。 try_files 会到硬盘里尝试找这个文件。如果存在名为 /root/example (其中 root 是项目代码安装目录)的文件,就直接把这个文件的内容发送给用户。 显然,目录中没有叫 example 的文件。然后就看uri/,增加了一个 /,也就是看有没有名为 /$root/example/ 的目录。
    又找不到,就会 fall back 到 try_files 的最后一个选项 /index.html,发起一个内部 “子请求”,也就是相当于 nginx 发起一个 HTTP 请求到 http://localhost/index.html

    8、测试配置文件nginx -t
    9、重启,载入新的配置文件nginx -s reload
    10、此时打开localhost/testWeb就能看到页面了

    相关文章

      网友评论

          本文标题:vue部署到nginx

          本文链接:https://www.haomeiwen.com/subject/meqzzhtx.html