这里是文章模块栏目内容页
vue项目调试用script标签引入js文件

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 这个对象上。