vue-cli2.x中用法
1、 index.html中引入相关的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>我是标题</title>
<script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="/map/map_loader.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
2、 修改build/webpack.base.conf.js文件，通过externals选项加载外部扩展，引入依赖库，不需要webpack处理
module.exports = {
...
externals: {
'vue': 'Vue', // 左侧vue是我们自己引入时候要用的，右侧是开发依赖库的作者定义的，是固定值，不同的库的这个值需要到相应的库的开发文档中获取，其实这个值最终就是绑定到window对象上的全局变量。
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios'
}
...
}
通过上面的配置后使用就还是跟以前一样使用就行了，
vue-cli3.x 使用方法
1、同上面的步骤1.
2、在vue.config.js configureWebpack选项中通过externals选项加载外部扩展，引入依赖库，不需要webpack处理
// ...
module.exports = {
// ...
configureWebpack: { // webpack配置，值位对象时会合并配置，为方法时会改写配置
// 增加一个plugins
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
],
externals: {
'vue': 'Vue', // 左侧vue是我们自己引入时候要用的，右侧是开发依赖库的主人定义的不能修改
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
// 'element-ui': 'ELEMENT'
}
},
// ...
};
在使用的过程中遇到了一个问题，就是通过cdn引入压缩的vue文件，启动项目后，google浏览器vue开发插件无法工作，也是纠结了很久才找到是这个原因导致的。把上面的vue的cdn地址改成//cdn.bootcss.com/vue/2.5.2/vue.js就行了。那么问题就来了，我不可能在生产环境使用未被压缩的库文件吧？
上面的问题就引出了另一个问题。”怎么在vue的html文件里根据不同的环境加载不同的文件？“
稍微注意点我们就会发现在vue-cli生成的项目，index.html里面有这样一句代码
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
代码里面动态输出了一个变量，我猜测这个语法是ejs模板语法，所以我大胆地尝试了一下
<% if(1 === 1) { %>
<script src="//cdn.bootcss.com/vue/2.5.2/vue.js"></script>
<% } else { %>
<script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<% } %>
发现能正常加载输出script标签并加载vue文件。这是因为vue-cli-service内部使用html-webpack-plugin处理的html文件，而html-webpack-plugin内部使用了ejs模板。
来到node_modules 的 html-webpack-plugin，在index.js里就能看到他的逻辑了
class HtmlWebpackPlugin {
constructor (options) {
// Default options
this.options = _.extend({
template: path.join(__dirname, 'default_index.ejs'),
templateParameters: templateParametersGenerator,
filename: 'index.html',
hash: false,
inject: true,
compile: true,
favicon: false,
minify: false,
cache: true,
showErrors: true,
chunks: 'all',
excludeChunks: [],
chunksSortMode: 'auto',
meta: {},
title: 'Webpack App',
xhtml: false
}, options);
}
}
上面的代码肯定不陌生，就是我们在写插件或者库的时候接收对象类型参数时，用来做传入参数和默认值的合并用的。上面有个template参数，用来指定编译时的模板文件，根据他的默认值就能看出是用了ejs模板引擎了。default_index.ejs内容如下：
// html-webpack-plugin/default_index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
有了上面的理解，我们需要做的就是把1===1换成我们想要的逻辑就行了，就是获取环境变量来来判断是生产环境还是开发环境。既然是webpack处理的html文件，那么在上下文中就肯定能访问到webpack在运行时的node环境变量process.env
最终index.html代码如下
<!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>我是标题</title>
<% if(process.env.VUE_APP_NODE_ENV === 'development') { %>
<script src="//cdn.bootcss.com/vue/2.5.2/vue.js"></script>
<% } else { %>
<script src="//cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<% } %>
<script src="//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="/map/map_loader.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
通过上面的调整，就能同时使用cdn引入库文件而不影响我们原来的调试了
