单页面应用的打包部署（vue-cli、creat-react-app ）

Z时代
2024-01-10
分类：综合

react

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"',

}),