vue.config 同时配置 chainWebpack和关闭eslint检查多个配置项目共存

大家可能会遇到和我一样的问题,所以我把它写出来

一开始你可能遇到这个问题:

vue报错:Component name “xxx“ should always be multi-word

于是你去网上搜索,发现解决问题的方法是

vue.config 同时配置 chainWebpack和关闭eslint检查多个配置项目共存_第1张图片

之后你继续做需要解决跨域问题是这样的

module.exports = {
   "devServer": {                //记住,别写错了devServer//设置本地默认端口  选填
       port: 8085,
       proxy: {                 //设置代理,必须填
           '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字,名字可以自己定
               target: 'http://localhost:8081',     //代理的目标地址
               changeOrigin: true,              //是否设置同源,输入是的
               pathRewrite: {                   //路径重写
                   '^/api': ''                     //选择忽略拦截器里面的内容
               }
           }
       }
   },

由于你是小白,你决定直接cv上去就会写成下面的这个样子

vue.config 同时配置 chainWebpack和关闭eslint检查多个配置项目共存_第2张图片

之后你会发现第二个module.exports覆盖第一个module.exports,事实上如何让两个module.exports中的内容同时生效呢?

vue.config 同时配置 chainWebpack和关闭eslint检查多个配置项目共存_第3张图片

多个配置代码如下

module.exports = {
    baseUrl: './',
    assetsDir: 'static',
    parallel: false,
    productionSourceMap: false,
    devServer: {
        host:'localhost',
        port:'8081',
        open:true
    },
}
const path = require("path");
function resolve(dir) {
    return path.join(__dirname, dir);
}

module.exports = {
    publicPath: './',
    chainWebpack: config => {
        config.resolve.alias
            .set('@', resolve('src'))
            .set('utils', resolve('src/utils'))
            .set('assets', resolve('src/assets'))
            .set('common', resolve('src/components'));
    },
    configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {// 为生产环境修改配置...
            config.mode = 'production';
            config["performance"] = {//打包文件大小配置
                "maxEntrypointSize": 10000000,
                "maxAssetSize": 30000000
            }
        }
    },
    transpileDependencies: true,
    lintOnSave: false, //关闭eslint检查
};

你可能感兴趣的:(vue.js,javascript,前端)