在vue-cli构建的项目中，且使用在移动端，我们希望每一个页面加载时都可以使用flexible.js来适配手机。 那么这个flexible.js被import到每一个组件中就不合适了。
好的方法是直接放在index.html的head中。
方法如下：
第一步：
在src同一个目录下建立static文件夹（vue-cli自身就有），然后在static中建立一个js文件夹存放静态js文件，即把flexible.js放进去。
第二步：
直接在html中引用该文件，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>wechat2</title>
<script src="./static/js/flexible.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
</body>
</html>
第三步：
npm run dev
这样，我们就可以引入flexible.js了，经过压缩后的flexible.js只有惊人的1kb！！！
注意：如果将flexible.js放在其他目录下是不起作用的。因为我们在dev-server.js中可以看到下面的代码：
// serve pure static assets var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) app.use(staticPath, express.static('./static'))
即使用静态文件功能，并且使用的path为path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)。 而config配置如下：
assetsSubDirectory: 'static',
assetsPublicPath: '/',
即在根目录的static下，所以必须将第三方的js文件放在这里，否则无法获取。
已为社区贡献6条内容
所有评论(0)