vue配置文件不打包

更新日期: 2019-05-27阅读: 2.4k标签: 配置

在开发中碰到一个问题,如果公共配置写在src里面会被打包,无法做到可读性可以随时更改配置,所以只能写在static文件夹下,那么就实现一个公共配置文件吧。


在static文件夹下添加一个配置文件

const httpUrl = 'http://190.168.1.1:18003/api'

function errorMethod(error, obj) {
  console.log(error)
  if (typeof (error.response) === 'undefined') {
    obj.$message({ message: '网络异常,请稍后再试...', type: 'error' })
    return
  }
  if (error.response.status === 403) {
    obj.$router.push('/')
  } else {
    obj.$message({ message: '网络异常,请稍后再试...', type: 'error' })
  }
}
export default {
  httpUrl,
  errorMethod
}


在main.js文件中添加引用

import config from '../static/config'
vue.prototype.config1 = config


就可以在相应的页面使用了。

this.config1.httpUrl

然鹅。。。上面的这种操作并没有卵用,只是文件不打包,但是实际上还是打包进去了,无论怎么改外面这个包都无效。

既然import引用都会将文件打包,那么就采用非import方式引用,也就是最原始的引入js文件方式。

1、在static文件夹下创建文件common.js

var common = {
  httpUrl: 'http://192.168.1.1:18003/project',
  pollTime: 10000,
  errorMethod: function(error, obj) {
    console.log(error)
    if (typeof (error.response) === 'undefined') {
      obj.$message({ message: '网络异常,请稍后再试...', type: 'error' })
      return
    }
    if (error.response.status === 403) {
      obj.$router.push('/')
    } else {
      obj.$message({ message: '网络异常,请稍后再试...', type: 'error' })
    }
  }
}

2、在你的vue-cli根目录的index.html文件中添加你的这个js文件引用。

<script src="static/common.js"></script>

3、就按照这种引入方式来调用即可拿到值。

common.httpUrl


链接: https://fly63.com/article/detial/3440

Vue路由的配置

vue路由是可以通过组件的形式把所有的组件组装成为一个应用程序,当我们需要的时候,将这个组件映射到路由,然后告诉Vue 我们在哪里渲染它们。路由是我们浏览器的一个地址。

TypeScript 用 Webpack/ts-node 运行的配置记录

Node 里面去跑,具体场景一些路由配置, 比较大的一块 JSON 数据定义在 TypeScript 里,我另外有增加脚本, 基于这些 JSON 数据用来生成切换路由的函数,这就需要运行 TypeScript 了, 而且可能包含一些额外的业务代码。

webpack常用配置

看《深入浅出webpack》总结一下常用的webpack的属性的含义并加了一些自己的链接,写在一个文件下更能有全局感受,更能理解各个属性中间的关系,重点要关注entry,output,resolve,module, plugins几部分

webpack--babel之配置文件.babelrc

ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写js代码更加得心应手,比如class,let,for...of promise等等这样的,但是可惜的是这些js新特性只被最新版本的浏览器支持

不能不知道的webpack基本配置

在很久很久以前,在我们前端还只是页面切图仔的年代,我们开发一个html页面,通常会遇到这些情况:需要引入十几个css和js文件,而且因为他们彼此间有着依赖关系,所以引入的顺序还不能乱。传统的html+css+js开发方式不能不能很好地运用less/scss等css预处理器以及ES6+的高级语法。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!