vue-cli2 引入固定cdn资源操作记录
vue引入cdn也不是什么神奇的操作，但是自己之前一直没有尝试过，这次正好项目优化需要，所以，实操一波，特此记录
本次cnd引入了如下资源
- vue
- vue-router
- axios
- vue-lazyload
暂时就是上面四个，没有用到vuex，本来这次还引入了vue_i18n,但是通过cdn引入一直报错，很蛋疼，如果有谁知道怎么做烦请赐教。
cnd资源都是https://www.jsdelivr.com/ 上面搜的
稍微改造了
build/webpack.base.conf.js
build/webpack.dev.conf.js
build/webpack.prod.conf.js
//webpack.base.conf.js
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
},
externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'axios': 'axios',
'vue-lazyload':'VueLazyload'
}
}//webpack.dev.conf.js,这个没有复制全，就改动了这么一小个地方
new HtmlWebpackPlugin(Object.assign(
{
filename: 'index.html',
template: 'index.html',
inject: true
},
config.dev.cdn
)
),
//webpack.prod.conf.js
new HtmlWebpackPlugin(Object.assign(
{
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeAttributeQuotes:true,
minimize: true,
removeConments: true,
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
},
config.build.cdn)
),config/index.js
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: false,
cdn: {
js: [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js",
"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.js",
"https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js",
"https://cdn.jsdelivr.net/npm/[email protected]/vue-lazyload.js"
]
}
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: false,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report,
cdn: {
js: [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js",
"https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js",
"https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js",
"https://cdn.jsdelivr.net/npm/[email protected]/vue-lazyload.min.js"
]
}
}
}最后就是index.html了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no ,viewport-fit=cover" name="viewport">
<title>test</title>
</head>
<body>
<div id="app"></div>
<% for (var i in htmlWebpackPlugin.options.js&&htmlWebpackPlugin.options.js) { %>
<script src="<%= htmlWebpackPlugin.options.js[i] %>"></script>
<% } %>
</body>
</html>
基本上这样就可以了，其实还有一些第三方插件，还不知道怎么通过cdn引入，有哪位大大比较有经验的，希望不吝赐教