如何购买一个网站的域名,小程序开发公司网,智能网站优化 cms 加盟,文昌湖城乡建设局网站1、一般打包 #xff1a;直接 npm run build。#xff08;webpack的文件#xff0c;根据不同的命令#xff0c;执行不同的代码的#xff09; 注#xff1a;这种打包的静态文件#xff0c;只能放在web服务器中的根目录下才能运行。
2、在服务器中 非根目录下 运行的 打包…1、一般打包 直接 npm run build。webpack的文件根据不同的命令执行不同的代码的 注这种打包的静态文件只能放在web服务器中的根目录下才能运行。
2、在服务器中 非根目录下 运行的 打包需要配置
参考https://segmentfault.com/a/1190000014561644
3、在本地文件系统中打开不需要web服务器
暂时 不清楚
4、使用 history模式 打包的 配置 http://tigerliu.site/2018/10/vue-history/ 亲测有效配置很简单
nginx 服务器下 配置在location下 加 try_files $uri $uri/ /index.html; 就可以了
location / {try_files $uri $uri/ /index.html;
}注意代码中的相对路径是以浏览器上 地址 为参考的而不是文件所在目录一般情况这两个是统一的但是服务器配置过就不一定了。比如浏览器请求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,}),
