vue项目调试用script标签引入js文件
在过往的html+js开发网站模式中,习惯在网页的head头部通过script标签直接引入js文件的方式把
js对象变量什么的加载到页面中,浏览器会按照script标签出现在页面的先后顺序依次导入js文件,
能解决后导入的js引用了前面导入的js里面变量和对象的问题;
如今,换成Vue的开发模式,有的类库居然没有 通过require方式导入的文件。这让人着急,尝试和往常一样
在index.html里面的head标签中用script导入js。然鹅,并不能生效。
通过查看 webpack的配置文件 config/index.js 发现参数 assetsSubDirectory:
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
所以,这才发现,没有能正确引入 js的 原因是 路径没写对。 assetsSubDirectory 参数已经告诉vue-cli-server服务器
它的静态资源文件路径在 /static 目录下。于是把需要引入的js文件放到这个文件夹下面。
这个时候再在index.html页面里面用script标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title> demo-vue</title>
<script src="/static/strophe-1.2.8.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
通过这样引入,在vue的其他模块里面 可以调研到 js文件里面的全局变量了。
不过,最后是吧全局变量赋值到window 这个对象上。