Vue2.0教程 （三）vue.config配置

1.1. 创建 vue.config.js （简易配置）

const IS_PROD = ['development', 'production'].includes(process.env.NODE_ENV)

module.exports = {
  publicPath: IS_PROD ? process.env.VUE_APP_PUBLIC_PATH : './', // 默认'/'，部署应用包时的基本 URL
  // outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
  // assetsDir: "", // 相对于outputDir的静态资源(js、css、img、fonts)目录
  lintOnSave: false,
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  productionSourceMap: !IS_PROD, // 生产环境的 source map
  parallel: require('os').cpus().length > 1,
  pwa: {}
}

1.2. 配置 proxy 代理解决跨域问题

假设 mock 接口为 http://www.baidu.com/login

module.exports = {
    devServer: {
        // port: 8085, // 端口号
        // host: 'localhost', // ip
        // https: false, // https:{type:Boolean}
        // open: true, // 配置自动启动浏览器
        // 跨域配置
        proxy: {
            // 所有以 /api 为前缀的请求将被代理到 http://www.baidu.com
            // 即 /api/login -> http://www.baidu/login
            '/api': {
                target: 'http://baidu.com', // 目标代理接口地址
                changeOrigin: true,// 开启代理，在本地创建一个虚拟服务端
                // ws: true, // 是否启用websockets
                pathRewrite: {
                    '^/api': ''
               }
           }
       }
   },
}

访问

<script>
import axios from "axios";
export default {
  mounted() {
    axios.get("/api/1").then(res => {
      console.log(res);
    });
  }
};
</script>

1.3. 添加别名 alias

const path = require("path");// 引入 path 包
const resolve = dir => path.join(__dirname, dir)
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

module.exports = {
  // 声明配置webpack
  chainWebpack: (config) => {
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  },
  css: {
    loaderOptions: {
      postcss: {
        plugins: [require('tailwindcss'), require('autoprefixer')]
      }
    }
  }
}

1.4 完整配置

const path = require('path') // 引入 path 包
const resolve = (dir) => path.join(__dirname, dir)

module.exports = {
  devServer: {
    port: 8085, // 端口号
    // https: false, // https:{type:Boolean}
    host: '0.0.0.0',
    open: true, // 配置自动启动浏览器
    // 跨域配置
    proxy: {
      // 所有以 /api 为前缀的请求将被代理到 http://www.jr-soft.com
      // 即 /api/login -> http://www.jr-soft.com/login
      '/api': {
        target: 'http://www.jr-soft.com', // 目标代理接口地址
        changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        // ws: true, // 是否启用websockets
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
  // 声明配置webpack
  chainWebpack: (config) => {
    // 添加别名
    config.resolve.alias.set('@', resolve('src'))

    // 注意安装 svg-sprite-loader
    // set svg-sprite-loader

    // config.module
    //   .rule('svg')
    //   .exclude.add(resolve('src/assets/icons'))
    //   .end()
    // config.module
    //   .rule('icons')
    //   .test(/\.svg$/)
    //   .include.add(resolve('src/assets/icons'))
    //   .end()
    //   .use('svg-sprite-loader')
    //   .loader('svg-sprite-loader')
    //   .options({
    //     symbolId: 'icon-[name]'
    //   })
    //   .end()
  },
  css: {
    loaderOptions: {
      postcss: {
        // 注意要安装tailwindcss
        // plugins: [require('tailwindcss'), require('autoprefixer')]
      },
    },
  },
}