vue 项目中的打包配置

当我在使用vue 项目的时候，我们可能会打包一下线上环境发布，一会又在本地启动，因为线上的环境要放在站点根目录下的二级目录中，
而我们的测试环境只是在 ./ 的根目录下，所以，当我要打包的时候，我一般的会更改文件的三个地方

一. vue.config.js 文件中的 publicPath 配置项

二. 修改 vue 的路由文件的 router.js

三. 在我封装的 请求类中 http.js中的 axios 配置修改

上面这样打开后又注释真是麻烦

后来我使用了 process.env 对象，做了一个判数，完美解决了问题

process 是 node 的一个对象，可以不用引入，就直接使用

当开发环境时， process.env.NODE_ENV 的值是 development 当生产环境是
process.env.NODE_ENV 的值是 production

通过这个的判断，我们就可以在代码中像这样子写，就不用反复的去打开，关闭注释了

//http.js
baseURL: process.env.NODE_ENV === "development" ? "http://localhost:8080" : "https://www.zjcityos.com",//vue router.js
base: process.env.NODE_ENV === 'development'?process.env.BASE_URL:"/wmldb/",//vue.config.js
publicPath:process.env.NODE_ENV === "development" ? "./":"/wmldb/",

vue 项目中的打包配置相关推荐

vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
Vue项目中使用proxyTable配置代理失效的解决办法
花了一天的时间,卡在了配置代理这...总是报如下错误: 502 bad gateway意思就是Web 服务器作为网关或代理服务器时收到无效的响应,接着再查看浏览器开发者工具下的Network, loc ...
在vue项目中webpack打包后字体不生效
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
VUE 项目中引入 json 配置
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 这个写法还是第一次见到,也不知道是否还有什么环境配置,记录一下,或许以后什么时候也可以参考: 1. ...
[vue] 在vue项目中如何配置favicon？
[vue] 在vue项目中如何配置favicon? 也可以在当前项目部署的端口主目录下存放favicon.ico文件,默认就会显示该图标个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
vue项目中配置标题栏title的图标和文字
一.普通 HTML 页面,配置图标和文字 <head><title>标题栏文字</title><link rel="icon" href= ...
Vue项目中tinymce富文本的安装以及配置
Vue项目中tinymce富文本的安装以及配置对于目前网上存在的许多富文本插件中,个人还是觉得tinymce相对比较强大一些.在使用配置的过程中,可能会出现配置不完全,导致使用不了的情况,下面把我个 ...
Vue项目中ESLint配置（VScode）
Vue项目中ESLint配置(VScode) 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint, ...
去除vue项目中的#及其ie9兼容性
一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) 1 export default new Router({ ...

vue 项目中的打包配置

vue 项目中的打包配置相关推荐

最新文章

热门文章