~表示后面的字符是alias

@import '~@/assets/css/varibles.scss'

vue 中实现异步加载模块

前提：使用vue官方脚手架搭建（webpack）

使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build 会将所有的js代码打包为一个整体,这样打包使单页面的应用的体积比较大，浪费资源，通常的做法使用按需加载，以节约资源。

写法：

const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')

require.ensure

　　1.语法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])

dependencies: 依赖的模块数组 callback: 回调函数，该函数调用时会传一个require参数 chunkName: 模块名，用于构建时生成文件时命名使用 　　2.说明: require.ensure在需要的时候才下载依赖的模块，当参数指定的模块都下载下来了（下载下来的模块还没执行），便执行参数指定的回调函数。require.ensure会创建一个chunk，且可以指定该chunk的名称，如果这个chunk名已经存在了，则将本次依赖的模块合并到已经存在的chunk中，最后这个chunk在webpack构建的时候会单独生成一个文件。

　　3.在执行cnpm run dev 后chunk会被生成一个单独的js文件，当路由被访问的时候才加载对应chunk组件，这样就更加高效了。

vue.config.js

chainWebpack: (config) => {
// 其他地方可以直接使用XE

config.plugin("provide").use(webpack.ProvidePlugin, [

{

XE: "xe-utils",

},

]);

config.plugin("define").use(webpack.DefinePlugin, [

{

VE_ENV: {

MODE: JSON.stringify(process.env.NODE_ENV),

},

},

]);

config.plugins.delete("prefetch");

// config.plugins.delete("preload");

// config.optimization.delete("splitChunks");

},

index.html中会自动注入环境变量

完整的参数

 {
  webpack: [Getter],
  
  webpackConfig: {
    mode: 'development',
    context: '/Users/cfang/genyun/projects/special-test-period-2/de2-mobile-admin',
    devtool: 'eval-cheap-module-source-map',
    node: {
      setImmediate: false,
      process: 'mock',
      dgram: 'empty',
      fs: 'empty',
      net: 'empty',
      tls: 'empty',
      child_process: 'empty',
      console: false,
      global: true,
      Buffer: true,
      __filename: 'mock',
      __dirname: 'mock'
    },
    output: {
      path: '/Users/cfang/genyun/projects/special-test-period-2/de2-mobile-admin/dist',
      filename: 'js/[name].js',
      publicPath: '/',
      chunkFilename: 'js/[name].js',
      globalObject: "(typeof self !== 'undefined' ? self : this)",
      webassemblyModuleFilename: '[modulehash].module.wasm',
      library: '',
      hotUpdateFunction: 'webpackHotUpdate',
      jsonpFunction: 'webpackJsonp',
      chunkCallbackName: 'webpackChunk',
      devtoolNamespace: '',
      libraryTarget: 'var',
      pathinfo: true,
      sourceMapFilename: '[file].map[query]',
      hotUpdateChunkFilename: '[id].[hash].hot-update.js',
      hotUpdateMainFilename: '[hash].hot-update.json',
      crossOriginLoading: false,
      jsonpScriptType: false,
      chunkLoadTimeout: 120000,
      hashFunction: 'md4',
      hashDigest: 'hex',
      hashDigestLength: 20,
      devtoolLineToLine: false,
      strictModuleExceptionHandling: false
    },
    resolve: {
      alias: [Object],
      extensions: [Array],
      modules: [Array],
      plugins: [Array],
      unsafeCache: true,
      mainFiles: [Array],
      aliasFields: [Array],
      mainFields: [Array],
      cacheWithContext: true,
      preferAbsolute: true,
      ignoreRootsErrors: true,
      roots: [Array]
    },
    resolveLoader: {
      modules: [Array],
      plugins: [Array],
      unsafeCache: true,
      mainFields: [Array],
      extensions: [Array],
      mainFiles: [Array],
      cacheWithContext: true
    },
    module: {
      noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
      rules: [Array],
      unknownContextRequest: '.',
      unknownContextRegExp: false,
      unknownContextRecursive: true,
      unknownContextCritical: true,
      exprContextRequest: '.',
      exprContextRegExp: false,
      exprContextRecursive: true,
      exprContextCritical: true,
      wrappedContextRegExp: /.*/,
      wrappedContextRecursive: true,
      wrappedContextCritical: false,
      strictExportPresence: false,
      strictThisContextOnImports: false,
      unsafeCache: true,
      defaultRules: [Array]
    },
    optimization: {
      splitChunks: [Object],
      minimizer: [Array],
      removeAvailableModules: false,
      removeEmptyChunks: true,
      mergeDuplicateChunks: true,
      flagIncludedChunks: false,
      occurrenceOrder: false,
      sideEffects: false,
      providedExports: true,
      usedExports: false,
      concatenateModules: false,
      runtimeChunk: undefined,
      noEmitOnErrors: false,
      checkWasmTypes: false,
      mangleWasmImports: false,
      namedModules: true,
      hashedModuleIds: false,
      namedChunks: true,
      portableRecords: false,
      minimize: false,
      nodeEnv: 'development'
    },
    plugins: [
      VueLoaderPlugin {},
      [DefinePlugin],
      [DefinePlugin],
      [CaseSensitivePathsPlugin],
      [FriendlyErrorsWebpackPlugin],
      [HtmlWebpackPlugin],
      [PreloadPlugin],
      [PreloadPlugin],
      [CopyPlugin],
      [HotModuleReplacementPlugin],
      [ProgressPlugin]
    ],
    entry: { app: [Array] },
    cache: true,
    target: 'web',
    performance: false,
    infrastructureLogging: { level: 'info', debug: false }
  },
  htmlWebpackPlugin: {
    files: {
      publicPath: '/',
      chunks: [Object],
      js: [Array],
      css: [],
      manifest: undefined
    },
    options: {
      template: '/Users/cfang/genyun/projects/fake-test-period-2/de2-mobile-admin/node_modules/html-webpack-plugin/lib/loader.js!/Users/cfang/genyun/projects/fake-test-period-2/de2-mobile-admin/public/index.html',
      templateParameters: [Function: templateParameters],
      filename: 'index.html',
      hash: false,
      inject: true,
      compile: true,
      favicon: false,
      minify: false,
      cache: true,
      showErrors: true,
      chunks: 'all',
      excludeChunks: [],
      chunksSortMode: 'auto',
      meta: {},
      title: 'de2-mobile-admin',
      xhtml: false
    }
  },
  VUE_APP_NAME: 'de2-mobile-admin-dev',
  VUE_APP_ICON_HOST: 'https://fake.oss-cn-hangzhou.aliyuncs.com/',
  VUE_APP_BASE_URL: 'http://sc20-testgateway.genyun.com/fake/',
  VUE_APP_TJTESTS_API: 'http://sc20-fake.genyun.com/',
  NODE_ENV: 'development',
  BASE_URL: '/'
}