美文网首页
vue-cli 配置vue.config.js

vue-cli 配置vue.config.js

作者: 第二心跳 | 来源:发表于2021-07-05 20:13 被阅读0次

    **vue-cli3生成的项目比vue-cli2生成的项目目录简单很多,少了build与config文件夹,所以有的东西需要自己手动配置。**

    const path = require('path')

    module.exports = { 

      // 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致

      publicPath: './', 

      // 输出文件目录

      outputDir: 'dist', 

      // eslint-loader 是否在保存的时候检查

      lintOnSave: true, 

      // 是否使用包含运行时编译器的 Vue 构建版本

      runtimeCompiler: false, 

      // 生产环境是否生成 sourceMap 文件

      productionSourceMap: false, 

      // 生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI)

      integrity: false, 

      // webpack相关配置

      chainWebpack: (config) => {

        config.resolve.alias

          .set('vue$', 'vue/dist/vue.esm.js')

          .set('@', path.resolve(__dirname, './src'))

      },

      configureWebpack: (config) => {   

      if (process.env.NODE_ENV === 'production') {     

          // 生产环境

          config.mode = 'production'

        } else {     

          // 开发环境

          config.mode = 'development'

        }

      }, 

      // css相关配置

      css: {   

        // 是否分离css(插件ExtractTextPlugin)

        extract: true,   

        // 是否开启 CSS source maps

        sourceMap: false, 

        // css预设器配置项

        loaderOptions: {},   

        // 是否启用 CSS modules for all css / pre-processor files.

        modules: false

      }, 

      // 是否使用 thread-loader

      parallel: require('os').cpus().length > 1,

      // PWA 插件相关配置

      pwa: {},

      // webpack-dev-server 相关配置

      devServer: {

        open: true,

        host: 'localhost',

        port: 8080,

        https: false,

        hotOnly: false, 

        // http 代理配置

        proxy: {     

          '/api': {

            target: 'http://127.0.0.1:3000/api',

            changeOrigin: true,

            pathRewrite: {         

                '^/api': ''

            }

          }

        },

        before: (app) => {}

      },

      // 第三方插件配置

      pluginOptions: {

      }

    }

    相关文章

      网友评论

          本文标题:vue-cli 配置vue.config.js

          本文链接:https://www.haomeiwen.com/subject/awviultx.html