zoukankan      html  css  js  c++  java
  • 单页面应用的 打包部署(vue-cli、creat-react-app )

    Vue的打包部署

    1、一般打包 :直接 npm run build。(webpack的文件,根据不同的命令,执行不同的代码的)

      注:这种打包的静态文件,只能放在web服务器中的根目录下才能运行。

    2、在服务器中 非根目录下 运行的 打包:需要配置

      参考:https://segmentfault.com/a/1190000014561644

    3、在本地文件系统中打开,不需要web服务器

       暂时 不清楚

    4、使用 history模式 打包的 配置 : https://blog.csdn.net/qq_42881675/article/details/103006905 (亲测有效)  或   https://blog.csdn.net/weihaifeng163/article/details/100603315(推荐)

      nginx 服务器下 配置:在location下 加  try_files $uri $uri/ /index.html; 就可以了

    location / {
          try_files $uri $uri/ /index.html;
    }

      路由上配置: 这个base也必须要配

      mode: 'history',
      base: 'root-dir', // 需要配置此项来设置路由的基础路径,不然路由表只会按根路径来匹配

    补充:还有一个思路,可以不用在服务器上进行 history模式 的配置,给每个路由创建一个对应的html文件就可以了,里面的代码和index.html一样。(具体怎么处理参考下面react的处理

    注意:代码中的相对路径是以浏览器上 地址 为参考的,而不是文件所在目录(一般情况这两个是统一的,但是服务器配置过就不一定了。比如浏览器请求a文件,服务器把b文件给浏览器,这个时候b文件的相对路径是以url的地址为参考的,即a的url地址)。

       单页应用,hash模式的url地址是不变的(变的是hash值),所以打包后  页面的相对路径 都是相对index页面。但是history模式下,浏览器地址是改变的,所以直接把hash模式转化为history模式会出现错误。因为history模式下,不同的地址相对路径是不一样的。

    5、修改Vue打包后的默认文件名 : https://blog.csdn.net/daotiao0199/article/details/84777955

    6、vue-cli 不同环境打包 不同的接口地址 :需要单独这种区分的,一般是不同环境接口地址改变的不只是域名,主要是地址的目录不同。如:one.vom/test/api  和   two.com/pro/api  这两个环境根域名下的目录是不同的,这两个环境的打包就需要区分开来了。

      参考:https://blog.csdn.net/qq_34322905/article/details/84319010(亲测有效。理解了程序,webpack.dev.conf.js文件是可以不用改的,使用process.env.NODE_ENV 区分)

      多个服务器(web服务器和后台服务器在一个域名下),如测试环境(接口调用的是测试环境的域名)、正式环境(接口调用的是正式环境的域名)

      注意:调接口的地址域名不要写死,使用 / 开头表示根域名下的地址。不同的环境,如果只是域名的不同,完全不需要区分测试环境还是正式环境。根域名会自动添加的。

      难点:1、npm命令 中的 参数,在 webpack程序中是可以获取到。如:npm run build --test ,参数test 在webpack程序中可以获取这个值。 http://nodejs.cn/api/process.html#process_process_argv

            process.env.npm_config_argv  【npm 命令, 获取到的参数。node命令的话,这个变量是undefined】。如:npm run start --test 。使用npm_config_argv变量可以正常获取到 test参数

            process.argv 【node命令可以正常获取到 node命令相关参数。npm命令的话,这个变量返回的数组中不带参数】。如:node test.js --test 。使用 argv可以正常获取到 test参数

    const argv = JSON.parse(process.env.npm_config_argv).original || process.argv    // 个人觉得这里的 process.argv 是多余的。使用npm命令时,process.env.npm_config_argv 变量肯定是有数据的。

         2、通过配置,webpack程序中的变量值(常量),在前端js中是获取获取到的。编译时直接 文本替换。

      注意:cnpm 和 npm 命令打包后,process.env.npm_config_argv 获取的数组是不一样的。参考链接上的处理,只是针对npm进行处理的,cnpm是会有问题的。下面是我的改进(改进后npm和cnpm都可以正常打包):

    const HOST_ENV = argv[argv.length - 1] ? argv[argv.length - 1].replace(/[^a-z]+/ig,"") : ''   // npm和cnpm 命令下,--test参数都是在数组 argv 的最后面.

    7、vue-cli 中 通过配置,webpack 中的常量 可以在 前端js中使用(环境变量就是这样实现的)。 https://www.jianshu.com/p/887f0454ef96(推荐)  或 https://www.cnblogs.com/xiaofenguo/p/9994629.html

      webpack在编译 前端代码时,碰到 这种 常量 直接做文本替换(即打包后的代码中是没有这个常量的,只有对应的值),指定的值必须包括引号。

        new webpack.DefinePlugin({
          'process.env.BASE_URL': '"' + process.env.BASE_URL + '"', // 这里属性名process.env.BASE_URL的配置是给前端js使用的,属性值中process.env.BASE_URL是node的全局变量,所有的node程序都可以使用,但是前端的js是不能使用的。
          'process.env.HANGZHOU': '"hangzhou"',
        }),

    creact-react-app

    1、browserHistory 模式,服务器不配置:https://www.jianshu.com/p/e73d47885514

       思路:每个 路由路径 下,都放置一个跟首页一样的 index.html

  • 相关阅读:
    mint17上建立lamp环境
    iptables开始ftp
    查看mysql集群状态是否正常
    限制SSH访问源,禁止4A之外的地址跳转访问
    查看cpu、内存和硬盘
    降kipmi0的CPU
    更改密钥对
    eNSP
    划分分区GPT11
    修改虚机IP
  • 原文地址:https://www.cnblogs.com/wfblog/p/10512246.html
Copyright © 2011-2022 走看看