【VUE】关于vue.config.js的小知识（一）

更多文章欢迎关注公众号“三横兰”

vue.config.js

当我们想要定义一些全局变量，比如常用的包管理器或者部署应用包的基本URL时，可以通过vue.config.js配置文件定义。这个文件是可选的，如果在项目的根目录下，那么它会被 @vue/cli-service 自动加载，比如我们常用到的vue-cli-service serve或者vue-cli-service build。当然，如果不想用这个文件，也可以直接写在package.json的vue字段。如果根目录下存在vue.config.js文件，那么package.json文件中的vue字段的配置会被忽略。举个例子，我们定义应用的基本URL

package.json的vue字段配置：

{
  // your other config
  "vue": {
    "publicPath": "/package"
  }
}

当我们执行npm run serve启动的时候访问的url为http://localhost:8080/package/

vue.config.js的配置如下：

module.exports = {
  publicPath: '/config'
}

执行npm run serve后访问的根url为http://localhost:8080/config/

两者起到的作用是一样的，不过要注意下如果是package.json话就要严格按照JSON的格式来写。

接下来我们一个个属性去了解这个文件，我们先用vue create vue-config-js命令生成我们的实验project

baseUrl

从 Vue CLI 3.3 起已弃用，请使用publicPath。

publicPath

类型：string

默认值：'/'

默认的情况当项目启动后访问的基本url为http://your-app_address:port/，如果我们的应用部署在子路径或者有特殊路径要求，则可以设置publicPath为your-app-name，如：

module.exports = {
  publicPath: '/subApp'
}

npm run serve访问的路径变为http://localhost:8080/subApp/

outputDir

类型：string

默认值：dist

默认情况下当我们执行vue-cli-service build打包的时候会把包输出到根目录下的dist，如

当我们想配置输出到自己想要的目录时，则可以修改这个值，如我们想输出到pack/my-app，修改vue.config.js如下：

module.exports = {
  outputDir: 'pack/my-app'
}

执行npm run build后的文件结构如下

可以看出打出的包放在了我们配置的路径下。

每次打包的时候vue都会检查这个目录是否存在，如果存在它会先删除然后再build，可以通过在vue-cli-service build后添加--no-clean来关闭。

assetsDir

类型：string

默认值：''

从上面的打包图可以看出静态资源(css、img、js)是平铺在outputDir下面的，如果我们想把它们放到规定的目录下，可以修改assetsDir，如

module.exports = {
  outputDir: 'pack/my-app',
  assetsDir: 'assets'
}

vue-cli-service build后的目录如下

当修改了filename或者chunkFilename后，设置的assetsDir会失效，怎么理解呢？我们修改下vue.config.js

const TIMESTAMP = new Date().getTime()

module.exports = {
  outputDir: 'pack/my-app',
  assetsDir: 'assets',
  configureWebpack: {
    output: {
      filename: 'js/[name].' + TIMESTAMP + '.js',
      chunkFilename: 'js/[name].' + TIMESTAMP + '.js',
    }
  }
}

给每个js文件加上时间戳，vue-cli-service build后的目录如下

js文件并不在assetsDir下，而是在outputDir下，设置的assetsDir失效了

indexPath

类型：string

默认值：index.html

从上面打出的包的根目录下有个index.html文件，如果我们想修改默认值，则可通过修改indexPath这个值来实现，举个例子

module.exports = {
  indexPath: 'myApp.html'
}

vue-cli-service build后的目录如下，根目录下使我们的新myApp.html文件

filenameHashing

类型：boolean

默认值：true

当我们浏览网页的时候，浏览器会缓存静态资源(js,css,img,font)，如果这些文件名加上hash值，当这些文件名变化时，刷新浏览器会重新加载这些资源。默认情况下filenameHashing这个值是true的，也就是我们每次vue-cli-service build的时候它都会在文件名加上hash值，看下图

如果我们不想带上hash值，可以将filenameHashing设置为false

module.exports = {
  indexPath: 'myApp.html',
  filenameHashing: false
}

打出来的包是这样的，只有文件名没有hash值。

未完待续

蜗牛速度般的学习，慢牛般的成长^-

更多文章欢迎关注公众号“三横兰”