vue.config文件常用配置详解

配置alias引用

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    chainWebpack(config) {
        config.resolve.alias
            .set('components', resolve('src/components'))
            .set('common', resolve('src/common'))
            .set('api', resolve('src/api'))
    },
}

这样在组件中引用的时候，就不用写繁琐的路径了：

import Xx from 'components/xx/xx';
import Xx from 'common/xx/xx';
import Xx from 'api/xx';

在书写CSS时候，引用的方法（注意在路径前面有个波浪线~）：

 @import "~common/less/variable.less";

这一点在vue3中得到了进一步优化，甚至在vue.config.js文件中不用配置，直接使用“@”去代表根路径/src（这个是配置的 webpack 的 alias，vue-cli 内部对 webpack 的封装做的。）。

import Header from '@/components/header/header'

本地模拟数据并获取查询参数

1、首先将模拟的data.json文件放在文件的根目录下；

2、配置config文件进行读取

// 配置本地模拟服务器文件
const webpack = require('webpack');
const path = require('path');
// 引入data.json文件
const appData_one = require('./data');
const appData_error = require('./data_error');

module.exports = {
    devServer: {
        before(app) {
            // 配置好后访问localhost:8080/api/?id=1 即可得到appData_one中的数据
            app.get('/api/', function (req, res) {
                // req.query.id就是url中的查询字符串
                // 注意获取的查询字符串是字符串类型 使用需要转化为整形！
                switch (parseInt(req.query.id)) {
                    case 1:
                        res.json(appData_one);
                        break;
                    default:
                        res.json(appData_error)
                }
            });
        }
    }
}

req.query可以获得/api/这个url上的查询字符串，如/api/?id=1&age=18，那么req.query = { id: 1, age: 18 }

文件打包路径

module.exports = {
    // 打包文件的前缀路径
    publicPath: '',
    // 设置false后，上线的项目就看不到源代码了，只能看到压缩代码
    productionSourceMap: false,
}

publicPath如果不设置为空，那么打包后的项目，其中js的引用路径如下：

// publicPath未设置，使用默认值
<script src="./vendor.js"></script>
// publicPath: ''
<script src="vendor.js"></script>
// publicPath: 'v1'
<script src="v1/vendor.js"></script>

一般的直接设置为空即可。这样打包后的资源路径可以被正常访问到。

在最新的vue3中，如下配置：

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '',            // 为空，那么打包后的js\css等前面是空，比如js/xxx
  outputDir: 'dist',         // 打包后的程序都在哪个文件夹下
  indexPath: 'app.html'  // 打包后的运行的主页=原来的index.html
});

修改打包后的主页地址，使用indexPath:'app.html' 指定即可

修改打包后的主页index.html 改为default.html

indexPath: 'default.html',

打包的JS和CSS取消缓存后缀

通常vue-cli打包后的js文件名如：app.190642b6.js

但是我们有时候并不需要缓存的后缀，只需要app.js，代码配置如下：

module.exports = {
    // 设置JS打包后的路径以及文件名
    configureWebpack: {
        // 输出重构  打包编译后的 文件名称 本例是取消多余的后缀只保留文件名
        output: {
            filename: `js/[name].js`,
            chunkFilename: `js/[name].js`
        }
    },
    // 设计CSS打包后的路径和文件名，需要后缀，则filename: `css/[name].[chunkhash].css`,
    css: {
        // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
        // 也可以是一个传递给 `extract-text-webpack-plugin` 的选项对象
        // 修改打包后css文件名
        // extract: true,
        extract:{
            filename: `css/[name].css`,
            chunkFilename: `css/[name].css`
        },

        // 是否开启 CSS source map？
        sourceMap: false,

        // 为预处理器的 loader 传递自定义选项。比如传递给
        // sass-loader 时，使用 `{ sass: { ... } }`。
        loaderOptions: {},
        // requireModuleExtension: false
    }
}

这样再打包后的文件名，就不会有缓存后缀了。

使用代理请求数据

module.exports = {
    devServer: {
        proxy: {
            // 所有 /api请求的路由会走这个代理
            '/api': {
                // 目标服务器地址，也就是接口服务器的真实地址
                target: 'https://ssl.qdxin.cn/wechat/api/m.qdxin.cn/api',
                /* 
                跨域时一般都设置该值 为 true
                开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，
                这样服务端和服务端进行数据的交互就不会有跨域问题 
                */
                changeOrigin: true,
                // 重写接口路由
                pathRewrite: {
                    // /api_index.json 被重写为 /api/index
                    // 这样处理后，最终得到的接口路径为： http://localhost:8080/api/index
                    // 然后node服务端实际请求的地址https://ssl.qdxin.cn/.../api/api_index.json
                    '^/api/index': 'api_index.json',
                    '^/api/list/api_more_69': 'api_more_69.json',
                    '^/api/detail/2/18000': 'detail/2/18000',
                }
            }
        }
    },
}

当然代理请求数据非必要还是不要使用node，一劳永逸的情况还是使用PHP等服务端语言写更好一些。这个仅仅作为备选的方案。

sass全局配置

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        // 全局引入变量和Mixin additionalData允许全局引入scss文件，
        // 全局引入后就可以直接用 无需每个组件都import了
        // 因为这是最新的特性，所以node-sass：^5.0与sass-loader:^10.1必须升级到最新版否则会报错
        additionalData: `
          @import "@/assets/scss/variable.scss";
          @import "@/assets/scss/mixin.scss";
        `
      }
    }
  }
}

这样配置后，就无需在每个组件中都引用mixin.scss和variable.scss文件了。比如

// 以前 只有在每个组件import后才能使用，否则会报错
<style>
  @import "~common/less/variable.scss";
  @import "~common/less/mixin.scss";
  div{color: @blue;}

// 配置之后 无需引用，直接在<style>中使用即可
div{color: @blue;}

具体到less以及stylus中是否也有此功能配置，待我验证后补充哈~