vue.config.js基本配置，包括配置不打包的模块vue,elementui，通过cdn引入，提取css到单独的css文件，css、js添加hash值，修改端口号，配置跨域代理

最新推荐文章于 2023-11-07 11:11:46 发布

艾小逗

最新推荐文章于 2023-11-07 11:11:46 发布

阅读量2.1k

点赞数

分类专栏： Vue 文章标签： vue elementui vue不打包设置 webpack js

本文为艾小逗原创文章，未经允许不可转载。转载请注明出处

本文链接：https://blog.csdn.net/qq_32442967/article/details/114030347

版权

Vue 专栏收录该内容

35 篇文章 4 订阅

订阅专栏

本文详细讲解了如何在Vue项目中通过vue.config.js配置CDN引入Vue和Element UI，实现静态资源分离，添加哈希值，调整部署端口，并配置跨域代理。同时介绍了如何在index.html中引入这些资源。

摘要由CSDN通过智能技术生成

vue.config.js基本配置，包括配置不打包的模块vue,elementui，通过cdn引入，提取css到单独的css文件，css、js添加hash值，修改端口号，配置跨域代理

配置文件vue.config.js

// 配置通过CDN引入的js/css
const cdn = {
  externals: {
    'vue': 'Vue',
    'element-ui': 'ELEMENT'
  },
  js: [
    'https://cdn.bootcss.com/vue/2.5.2/vue.min.js',
    'https://cdn.bootcss.com/element-ui/2.12.0/index.js'
  ],
  css: [
    'https://cdn.bootcdn.net/ajax/libs/element-ui/2.12.0/theme-chalk/index.css'
  ]
}

module.exports = {
  chainWebpack: config => {
    if (process.env.NODE_ENV !== 'development') {
      config.plugin('html').tap((args) => {
        args[0].cdn = cdn
        return args
      })
    }
    config
      .plugin('html')
      .tap(args => {
        args[0].title = '后台管理系统'
        return args
      })
    if (process.env.NODE_ENV !== 'development') {
      config.output.filename('js/[name].[hash:8].js').end()
      config.output.chunkFilename('js/[name].[hash:8].js').end()
    }
  },
  configureWebpack: config => {
  // 配置不打包的模块
    config.externals = process.env.NODE_ENV !== 'development' ? cdn.externals : {}
  },
  lintOnSave: 'warning', // 设置eslint 报错时不停止代码编译 'error':停止 'false':'不检查'
  productionSourceMap: false, // 是否需要生产环境的 source map（减小dist文件大小，加速构建）
  publicPath: process.env.NODE_ENV === 'development' ? '/' : '/Manage',
  css: {
    requireModuleExtension: true, // 是否开启支持‘foo.module.css’样式
    extract: true, // 是否使用css分离插件 ExtractTextPlugin 抽离css
    sourceMap: process.env.NODE_ENV !== 'production' // 是否在构建样式地图，false将提高构建速度
  },
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    },
    proxy: { // 可配置多个跨域 /api1  /api2
      '/api': {
        target: 'http://test1.xxx.cn',
        changeOrigin: true, // 是否跨域
        // pathRewrite: {
        //   '^/api': '/'
        // },
        bypass: function(req, res, proxyOptions) {
          if (req.headers.accept.indexOf('html') !== -1) {
            console.log('Skipping proxy for browser request.')
            return '/index.html'
          }
        }
      }
    },
    https: false, // 是否为https
    host: 'localhost',
    port: 8060,
    open: true
  }
}

如果通过cdn引入elementui，需要注意的是：

vue.js也需要通过cdn引入，且在elementui之前引入

如果使用了模块化引入elementui，则需要配置 babel.config.js
注释掉模块化引入的设置

module.exports = {
 presets: [
   '@vue/cli-plugin-babel/preset'
 ]
 // 'plugins': [
 //   [
 //     'component',
 //     {
 //       'libraryName': 'element-ui',
 //       'styleLibraryName': 'theme-chalk'
 //     }
 //   ]
 // ]
}

index.html

引入cdn文件（css\js）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
    <% } %>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
  </body>
</html>