html中插入external link,通过external加载外部CDN资源

一、先看两段主要的代码(vue.config.js和public/index.html)

const path = require('path');

module.exports = {

publicPath: process.env.NODE_ENV === 'production' ? '' : '/',

// 输出文件目录

outputDir: process.env.NODE_ENV === 'production' ? 'dist' : 'devdist',

lintOnSave: false,

chainWebpack: (config) => {

// 发布模式

config.when(process.env.NODE_ENV === 'production', config => {

config

.entry('app')

.clear()

.add('./src/main-prod.js')

config.set('externals', {

vue: 'Vue',

'vue-router': 'VueRouter',

axios: 'axios',

echarts: 'echarts',

'vue-quill-editor': 'VueQuillEditor',

'element-ui': 'ELEMENT'

})

config.plugin('html').tap(args => {

args[0].isProd = true

return args

})

})

// 开发模式

config.when(process.env.NODE_ENV === 'development', config => {

config

.entry('app')

.clear()

.add('./src/main-dev.js')

config.plugin('html').tap(args => {

args[0].isProd = false

return args

})

})

//配置解析svg文件

const svgRule = config.module.rule("svg");

svgRule.uses.clear();

svgRule

.use("svg-sprite-loader")

.loader("svg-sprite-loader")

.options({

symbolId: "icon-[name]",

include: ["./src/icons"]

});

},

configureWebpack: (config) => {

config.resolve = { // 配置解析别名

extensions: ['.js', '.json', '.vue'], // 自动添加文件名后缀

alias: {

'vue': 'vue/dist/vue.js',

'@': path.resolve(__dirname, './src'),

'@c': path.resolve(__dirname, './src/components')

}

}

},

// 生产环境是否生成 sourceMap 文件

productionSourceMap: false,

// css相关配置

css: {

// 是否使用css分离插件 ExtractTextPlugin

extract: false,

// 开启 CSS source maps?

sourceMap: false,

// css预设器配置项

loaderOptions: {

scss: {

prependData: `@import "./src/styles/main.scss";`

}

},

// requireModuleExtension: false

// 启用 CSS modules for all css / pre-processor files.

// modules: false

},

// use thread-loader for babel & TS in production build

// enabled by default if the machine has more than 1 cores

parallel: require('os').cpus().length > 1,

/**

* PWA 插件相关配置,see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa

*/

pwa: {

iconPaths: {

favicon32: 'favicon.ico',

favicon16: 'favicon.ico',

appleTouchIcon: 'favicon.ico',

maskIcon: 'favicon.ico',

msTileImage: 'favicon.ico'

}

},

// webpack-dev-server 相关配置

devServer: {

open: false, // 编译完成是否打开网页

host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问

port: 8080, // 访问端口

https: false, // 编译失败时刷新页面

hot: true, // 开启热加载

hotOnly: false,

proxy: {

'/devApi': {

target: "http://www.web-jshtml.cn/vue_admin_api/token",

//API服务器的地址 http://www.web-jshtml.cn/api

changeOrigin: true,

pathRewrite: {

'^/devApi': ''

}

}

},

overlay: { // 全屏模式下是否显示脚本错误

warnings: true,

errors: true

},

before: app => {

}

},

/**

* 第三方插件配置

*/

pluginOptions: {}

}

微信息管理系统

We're sorry but doesn't work properly without JavaScript enabled.

Please enable it to continue.

二、将main.js复制为两个,一个main-prod.js ,另一个main-dev.js.一个用于开发用,一个发布用(需要注释一些东西,见下文)

image.png

三、总共分为三步

1.在vue.config.js里面配置externals,添加不需要打包的依赖(这些依赖都采用cdn引入)

2.注释上诉依赖在main-prod.js中的引入

3.将上诉依赖的cdn链接添加到public/index.html中

3.1 cdn链接 http://www.staticfile.org/

3.1注意vue的引入应当在element.js的前面

三、具体引入

1.element:

externals中配置 'element-ui': 'ELEMENT' 只能这么写

main.js相关element全部注释

public/index.html需要引入一个js,一个css

2.echarts

main.js全部注释

但是用到echarts的那个vue模块 中的引入,不注释

index中引入一个js(没有css)

3.vue(router,axios)

main.js照常引入(什么都不用注释)

index中引入一个js

4.nprogress

main.js中照常引入,然后注释一个css

index中引入一个css,一个js

5.vue-quill-editor

main中只引入一个vue-quill-editor，注释三个css

index中引入三个css,2个js