引用vue.config.js 里面的路径

在Vue项目中，我们可以通过修改vue.config.js文件来配置Webpack的loader和插件等一系列选项。

要引用vue.config.js文件中的路径，可以使用Webpack的环境变量来获取配置选项里定义的路径。比如在vue.config.js中定义了一个路径：

module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('@', path.join(__dirname, 'src'))
  },
  publicPath: './'
}

这里定义了一个别名@，指向src目录。在代码中可以这样引用：

import Comp from '@/components/Comp.vue'

在Webpack配置中，我们可以通过process.env.NODE_ENV来判断当前的环境，根据不同的环境来设置不同的选项。在vue.config.js中也可以这样使用：

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.optimization.splitChunks({
        chunks: 'all',
        maxInitialRequests: 10,
        minSize: 20000,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
              return `npm.${packageName.replace('@', '')}`
            }
          },
          common: {
            name: 'common',
            minChunks: 2,
            priority: -10,
            reuseExistingChunk: true
          }
        }
      })
    }
  }
}

这里根据环境变量来配置优化选项，只在生产环境下启用splitChunks插件进行代码分割。在开发环境下，可以使用Webpack的devServer选项来实现自动刷新、模拟请求等一系列开发相关的功能。