AI专业者开发社区 1 号成员
  •  0 回帖  •  7 浏览  •  4 个月前
 

【Vue】---Vue.config常用配置项

一、前言

　　Vue-cli3 搭建的项目 相比较 Vue-cli2 界面相对较为简洁，之前的 build 和 config 文件夹不见了，那么应该如何配置 如 webpack 等的配呢？

     

 

 二、基本配置

　　只需要在项目的根目录下新建 vue.config.js 文件（是根目录，不是 src 目录）

const path = require('path')

module.exports = {
publicPath: './', // 基本路径
outputDir: 'dist', // 输出文件目录
lintOnSave: false, // eslint-loader 是否在保存的时候检查
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
// webpack 配置
chainWebpack: (config) => {
},
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
} else {
// 为开发环境修改配置...
config.mode = 'development'
}
Object.assign(config, {
// 开发生产共同配置
            resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@c': path.resolve(__dirname, './src/components'),
'@p': path.resolve(__dirname, './src/pages')
} // 别名配置
            }
})
},
productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
// css 相关配置
    css: {
extract: true, // 是否使用 css 分离插件 ExtractTextPlugin
sourceMap: false, // 开启 CSS source maps?
        loaderOptions: {
css: {}, // 这里的选项会传递给 css-loader
postcss: {} // 这里的选项会传递给 postcss-loader
}, // css 预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
modules: false // 启用 CSS modules for all css / pre-processor files.
    },
parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
// webpack-dev-server 相关配置
    devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0', // 允许外部 ip 访问
port: 8022, // 端口
https: false, // 启用 https
        overlay: {
warnings: true,
errors: true
}, // 错误、警告在页面弹出
        proxy: {
'/api': {
target: 'http://www.baidu.com/api',
changeOrigin: true, // 允许 websockets 跨域
// ws: true,
                pathRewrite: {
'^/api': ''
}
}
} // 代理转发配置，用于调试环境
    },
// 第三方插件配置
    pluginOptions: {}
}