Vue@cli3配置文件引入cdn加速

概述省去在 index.html一个一个引入 js 和 cs 文件，直接在配置文件引入。过程安装插件 html-webpack-pluginnpm install --save-dev html-webpack-plugin在 package.json 同级目录新建 vue.config.js引入插件const HtmlWebpackPlugin = require('ht...

食之无味,弃之可惜

3340人浏览 · 2020-03-25 12:45:31

食之无味,弃之可惜 · 2020-03-25 12:45:31 发布

概述

省去在 index.html一个一个引入 js 和 cs 文件，直接在配置文件引入。

过程

安装插件 html-webpack-plugin

npm install --save-dev html-webpack-plugin

在 package.json 同级目录新建 vue.config.js
引入插件

const HtmlWebpackPlugin = require('html-webpack-plugin')

设置要排除的引入

const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  axios: 'axios'
}
const cdn = {
  // 开发环境
  dev: {
    css: [

    ],
    js: [

    ]
  },
  // 生产环境
  build: {
    css: [

    ],
    js: [
      'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js',
      'https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js',
      'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
      'https://cdn.bootcss.com/axios/0.19.0/axios.min.js',
    ]
  }
}

5.两种方式配置
方式1

module.exports = {
configureWebpack: config => {
    const myConfig = {}
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
        //externals里的模块不打包
        // Object.assign(config, {
        //   externals: externals
        // })
        myConfig.externals  = externals
    } else {
      // 为开发环境修改配置...
      myConfig.devServer = {
        disableHostCheck: true
      }
    }
    return myConfig
  },
  chainWebpack: config => {
    // 对vue-cli内部的 webpack 配置进行更细粒度的修改
    config.plugin('html').tap(args => {
        if (process.env.NODE_ENV === 'production') {
            args[0].cdn = cdn.build
        }
        if (process.env.NODE_ENV === 'development') {
            args[0].cdn = cdn.dev
        }
        return args
    })
  }

方式2（更简单一些）

module.exports = {
configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
        //externals里的模块不打包
         Object.assign(config, {
           externals: externals
         })
    } else {
      // 为开发环境修改配置...
    }
  },
  chainWebpack: config => {
    // 对vue-cli内部的 webpack 配置进行更细粒度的修改
    config.plugin('html').tap(args => {
        if (process.env.NODE_ENV === 'production') {
            args[0].cdn = cdn.build
        }
        if (process.env.NODE_ENV === 'development') {
            args[0].cdn = cdn.dev
        }
        return args
    })
  }

在 public/index.html 遍历js，css


 
  <!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
  <% 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" />
 
  <% } %>
   <!-- <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script> -->
  <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
  <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" ></script>
   <% } %>
</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 -->
</body>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<!-- <% for (var i in
   htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %> -->
 <!-- built files will be auto injected -->

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^