vue.config.js pathRewrite作用

Vue.js的vue.config.js文件中的pathRewrite选项是用来重写路径的。它可以用来修改webpack-dev-server服务器提供的虚拟路径映射规则。通过设置该选项，我们可以将客户端请求的URL路径重写为另一个路径，从而达到伪造静态文件路径的效果。这在前端开发中非常有用，因为我们经常需要在开发阶段将本地的资源（如图片、字体文件）等映射到合适的请求路径上。

相关问题

vue2 vue.config.js跨域

在Vue2中，可以通过在项目的根目录下创建vue.config.js文件来实现跨域。在该文件中，需要使用module.exports导出一个对象，其中包含devServer属性。在devServer属性中，可以通过配置proxy来实现跨域。具体步骤如下：

1. 在项目的根目录下创建vue.config.js文件。
2. 在vue.config.js文件中，使用module.exports导出一个对象。
3. 在导出的对象中，添加devServer属性，并配置其中的proxy属性。
4. 在proxy属性中，配置需要跨域的接口路径。
5. 在对应的接口路径中，设置target属性为目标服务器的地址。
6. 根据需要，可以设置其他属性，如ws、changeOrigin和pathRewrite等。

下面是一个示例的vue.config.js文件的代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

以上代码中，通过配置proxy属性，将以`/api`开头的请求代理到`http://localhost:3000`。这样，在Vue2项目中发起以`/api`开头的请求时，就会被代理到目标服务器。

请注意，以上代码仅为示例，实际使用时需要根据具体的接口和服务器进行配置。

vue2vue.config.js配置

在 Vue 2 中，你可以通过创建一个名为 `vue.config.js` 的文件来配置项目的构建和开发行为。这个文件需要放置在你的项目根目录下。

以下是一些常见的配置选项和用法示例：

#### publicPath

设置应用程序在服务器上的基本 URL。默认情况下，Vue CLI 会假设你的应用程序部署在域的根目录。

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/my-app/'
    : '/'
}

#### outputDir

指定构建输出的目录，默认为 `dist`。

module.exports = {
  outputDir: 'my-dist'
}

#### devServer

配置开发服务器。

module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

#### css

在 Vue CLI 2 中，你可以使用 `css` 配置来自定义 CSS 相关的配置。例如：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  }
}

#### chainWebpack

使用 `chainWebpack` 配置项可以对内部的 webpack 配置进行更细粒度的修改。

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({ symbolId: 'icon-[name]' })
      .end()
  }
}

这只是一些常见的配置选项示例，你可以根据你的项目需求进行更多的配置。更多详细的配置选项和用法可以参考 Vue CLI 的官方文档。