Vue中config的配置详解

PPFQ • 2024-10-25 13:52 • 编程

一、vueconfig的配置详解

在Vue项目中，config文件夹位于项目根目录下，用于配置项目的各种参数。Vue CLI会自动加载并使用config文件夹中的配置文件。config文件夹中会有两个文件：dev.env.js和prod.env.js。

dev.env.js：开发环境下的配置文件，包含开发环境下所需要的配置参数。prod.env.js：生产环境下的配置文件，包含生产环境下所需要的配置参数。在这两个文件中，会有一个基础的配置文件：index.js。index.js文件会被同时加载到开发环境和生产环境中，也是Vue项目中的核心配置文件。

index.js中的配置包括webpack和dev-server等相关的配置，但需要注意的是，config文件夹中的配置不能直接在Vue组件中使用，如果想要在组件中使用这些配置，可以使用webpack的DefinePlugin插件来实现。

二、vue项目config配置代理

在Vue项目中，config文件夹中的index.js文件中，有一个devServer属性，可以用来配置dev-server的相关参数，其中最常用的就是proxy属性。proxy属性可以将某些URL请求代理到另外一个地址，常用于解决跨域请求的问题。

以下是一个代理API请求的示例：

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:3000',
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    }
}

target：代理的目标地址
changeOrigin：将主机标头的来源更改为目标URL
pathRewrite：将代理的请求路径重写为没有/api路径的URL

三、vue项目config配置

在Vue项目中，config文件夹中的index.js文件中，有各种参数可以配置。以下介绍几种常见的配置方式：

1. 配置别名

通过配置别名可以在代码中更加方便地使用一些文件或者目录，例如src文件夹下面的components, assets, views等目录。

resolve: {
  alias: {
    '@': resolve('src'),
    'assets': resolve('src/assets'),
    'components': resolve('src/components'),
    'views': resolve('src/views')
  }
},

2. 配置端口号

可以通过配置端口号来改变dev-server的默认端口号，以下示例将端口号配置为8080。

port: 8080

3. 配置打包生成文件路径

配置打包生成文件的路径，可以通过outputDir属性来配置，以下示例指定打包生成文件的路径为dist目录。

outputDir: 'dist'

4. 配置CDN加速

可以通过配置externals属性，将一些较大的依赖库引入CDN来加速网页的加载速度。

externals: {
  'vue': 'Vue',
  'vue-router': 'VueRouter',
  'axios': 'axios',
  'element-ui': 'ELEMENT'
},

5. 配置图片压缩

可以通过配置image-webpack-loader、url-loader来压缩图片。

chainWebpack: (config) => {
  config.module
    .rule('images')
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({
      bypassOnDebug: true
    })
    .end()
}

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => {
        // 修改它的选项...
        options.limit = 10000
        return options
      })
  }
}

四、vue的config配置没有反应

在开发中，有时修改了Vue项目中config文件夹中的配置参数，发现更改没有生效，这可能是由于Vue项目已经被缓存的原因。可以通过以下步骤来清除Vue项目的缓存：

1. 关闭开发服务器
2. 删除项目根目录下的node_modules文件夹和package-lock.json文件
3. 在终端中输入npm cache clean –force命令，清除npm的缓存
4. 在终端中输入npm install命令，重新安装依赖库
5. 启动开发服务器

通过以上步骤，可以保证Vue项目的config文件夹中的配置参数生效。

原创文章，作者：PPFQ，如若转载，请注明出处：https://www.506064.com/n/144566.html