zoukankan      html  css  js  c++  java
  • vue-cli3 vue.config.js配置

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

    条件:

    将npm更新至最新  node >=8.9

    1.全局安装 npm install -g @vue/cli 或 yarn global add @vue/cli

    2.查看vue版本

    3.在一个新文件夹下创建项目

    在项目跟目录下新建vue.config.js对vue-cli以及webpack可以进行一些配置

    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: {
    
      }
    }
  • 相关阅读:
    jQuery 教程
    单例设计模式getInstance()
    JS和JQuery总结
    Anchor 对象
    static关键字
    HTML、html
    HTML DOM
    HTML DOM 实例Document 对象
    水池进水与放水问题:有一个水池,水池的容量是固定 的500L,一边为进水口,一边为出水口.........(多线程应用)
    迷你DVD管理器(Java版)
  • 原文地址:https://www.cnblogs.com/susutong/p/11457551.html
Copyright © 2011-2022 走看看