webpack配置学习

resolve

resolve.extensions

extensions:[‘.js’,’.vue’,’.json’],

我们在路由中引入组件时可以这样import Hello from ‘@components/Hello’;

resolve.alias

alias:{
    'element-ui': path.resolve(__dirname, '../')
}

resolve.modules

modules: [‘node_modules’]在引入的时候就不用

import ‘node_modules/util’,可以用

import ‘util’;

环境变量

静态环境变量的创建

在.env文件中

VUE_APP_API_BASE_URL=/api

动态环境变量的创建

在vue.config.js

const moment = require('moment');
process.env.VUE_APP_BUILD_TIME = moment().format('YYYY-M-D HH:mm:ss');

环境变量的使用

在html代码中

<span style="display: none;">ver:<%= VUE_APP_VERSION %>;build-time:<%= VUE_APP_BUILD_TIME%>;build-user:<%=VUE_APP_BUILD_USER%></span>

在vue代码中

data() {
    return {
      // 公钥
      publicKey: process.env.VUE_APP_PUBLIC_KEY,

    };
  },

在js中

const baseURL = process.env.VUE_APP_API_BASE_URL;