vue-cli 打包部署

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249900.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

EXCEL怎么打20位以上的数字?

EXCEL怎么打20位以上的数字? 转载于:https://www.cnblogs.com/macT/p/10208794.html

vue render函数

Vue中的Render渲染函数 VUE一般使用template来创建HTML&#xff0c;然后在有的时候&#xff0c;我们需要使用javascript来创建html&#xff0c;这时候我们需要使用render函数。比如如下我想要实现如下html&#xff1a; <div id"container"><h1><a hre…

Nexus介绍

转自&#xff1a;https://www.cnblogs.com/wincai/p/5599282.html 开始在使用Maven时&#xff0c;总是会听到nexus这个词&#xff0c;一会儿maven&#xff0c;一会儿nexus&#xff0c;当时很是困惑&#xff0c;nexus是什么呢&#xff0c;为什么它总是和maven一起被提到呢&#…

vue-cli 打包

一项目打包 1 打包的配置在 build/webpack.base.conf.js文件下 常量config在vue/config/index.js 文件下配置&#xff0c;__dirname是定义在项目的全局变量&#xff0c;是当前文件所在项目的文件夹的绝对路径。 2 需要修改vue/config/index.js 文件下的将build对象下的assets…

乘风破浪:LeetCode真题_010_Regular Expression Matching

乘风破浪&#xff1a;LeetCode真题_010_Regular Expression Matching 一、前言 关于正则表达式我们使用得非常多&#xff0c;但是如果让我们自己写一个&#xff0c;却是有非常大的困难的&#xff0c;我们可能想到状态机&#xff0c;确定&#xff0c;非确定状态机确实是一种解决…

python——获取数据类型

在python中&#xff0c;可使用type()和isinstance()内置函数获取数据类型 如&#xff1a; &#xff08;1&#xff09;type()的使用方法&#xff1a;    >>> a 230 >>> type(a) <class str> >>> a 230 …

vue项目工程中npm run dev 到底做了什么

npm install 安装了webpack框架中package.json中所需要的依赖 2.安装完成之后&#xff0c;需要启动整个项目运行&#xff0c;npm run 其实执行了package.json中的script脚本&#xff0c;npm run dev的执行如下 3.底层相当执行webpack-dev-server --inline --progress --confi…

JavaScript回顾与学习——条件语句

一、if...else // if elsevar age 16;if(0 < age && age < 6){console.log("儿童");}else if(6 < age && age < 14){console.log("少年");}else if(14 < age && age < 35){console.log("青年");}els…

bat等大公司常考java多线程面试题

1、说说进程,线程,协程之间的区别 简而言之,进程是程序运行和资源分配的基本单位,一个程序至少有一个进程,一个进程至少有一个线程.进程在执行过程中拥有独立的内存单元,而多个线程共享内存资源,减少切换次数,从而效率更高.线程是进程的一个实体,是cpu调度和分派的基本单位,是比…

webpack.config.js和package.json

webpack.config.js 是webpakc的配置文件&#xff0c;webpack是当今很火的一个打包工具 使用webpack.config.js在你的项目里 可以对你的项目进行模块化打包&#xff0c;并且也可使组件按需加载&#xff0c;还可将图片变成base64格式减少网络请求。 而package.json 是指你项目的…

七牛云图片加载优化

?imageView2/2/w/80https://developer.qiniu.com/dora/manual/1279/basic-processing-images-imageview2 ?imageView2/1/w/80/h/80会裁剪 ?imageView2/3/w/80/h/80不会裁剪 转载于:https://www.cnblogs.com/smzd/p/9025393.html

org.apache.maven.archiver.mavenarchiver.getmanifest怎么解决

原因就是你的maven的配置文件不是最新的 1.help ->Install New Software -> add ->https://otto.takari.io/content/sites/m2e.extras/m2eclipse-mavenarchiver/0.17.2/N/LATEST 或者&#xff08;更新于2018年4月18日17:07:53&#xff09; http://repo1.maven.org/mav…

npm中package.json详解

通常我们使用npm init命令来创建一个npm程序时&#xff0c;会自动生成一个package.json文件。package.json文件会描述这个NPM包的所有相关信息&#xff0c;包括作者、简介、包依赖、构建等信息&#xff0c;格式是严格的JSON格式。 常用命令 npm i --save packageName 安装依赖…

offset系列,client系列,scroll系列回顾

一 scroll系列属性 ——滚动1 scrollHeight/scrollWidth 标签内部实际内容的高度/宽度ele.scrollHeight 有两种情况&#xff0c;当内容超出盒子范围后&#xff0c;返回的是内容的高度&#xff0c;包括padding&#xff0c;从顶部内侧到内容的最外部分。当内容不超出盒子范围…

项目开发中的自我总结

最近忙的要死,因为新开发了两个项目.现在已经测试完毕了,准备部署到线上了. 然后不能白忙活吧,忙活完也得写点总结和经验吧,以后也有个记录. 1.一个bootstrapjquerylayuilaravel 5.4开发的一个后台系统 比较朴素 2.一个前后端分离的vuelaravel 5.4 开发的商家系统 我只负责后端…

webpack.config.js 参数详解

webpack.config.js文件通常放在项目的根目录中&#xff0c;它本身也是一个标准的Commonjs规范的模块。 var webpack require(webpack); module.exports {entry: [webpack/hot/only-dev-server,./js/app.js],output: {path: ./build,filename: bundle.js},module: {loaders: …

数组黑科技(偏性能方面)未完待更新...

数组去重最优解&#xff1a;Array.prototype.unique function () {var tmp new Map();return this.filter(item > {return !tmp.has(item) && tmp.set(item,1);})}搭配使用 Array.from(foo); // ["f", "o", "o"]let s new Set([f…

控制台添加log4net

1.添加nuget包 log4net 2.app.config配置 <?xml version"1.0" encoding"utf-8"?> <configuration> <configSections><section name"log4net" type"log4net.Config.Log4NetConfigurationSectionHandler, log4net&quo…

记一次vue 普通异步请求微信二进制二维码 乱码 问题解决然后渲染

后端压力大&#xff0c;前端分忧。 /*用微信小程序token拿二维码*/ async fetchMINIQRcode({commit,state},params){var instance axios.create({responseType: blob, //返回数据的格式&#xff0c;可选值为arraybuffer,blob,document,json,text,stream&#xff0c;默认值为js…

vue-cli项目中.postcssrc.js

module.exports {"plugins": {"postcss-import": {}, //用于import导入css文件"postcss-url": {}, //路径引入css文件或node_modules文件"postcss-aspect-ratio-mini": {}, //用来处理元素容器宽高比"postcss-…