vue-cli构建项目在index.html中使用静态文件
2017-05-18 01:43
1246 查看
在vue-cli构建的项目中,且使用在移动端,我们希望每一个页面加载时都可以使用flexible.js来适配手机。 那么这个flexible.js被import到每一个组件中就不合适了。
好的方法是直接放在index.html的head中。
npm run dev
这样,我们就可以引入flexible.js了,经过压缩后的flexible.js只有惊人的1kb!!!
即使用静态文件功能,并且使用的path为path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)。 而config配置如下:
assetsSubDirectory: 'static',
assetsPublicPath: '/',
即在根目录的static下,所以必须将第三方的js文件放在这里,否则无法获取。
好的方法是直接放在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文件放在这里,否则无法获取。
相关文章推荐
- vue2.0 使用vue-cli搭建的项目如何在index.html里引入静态css和js
- vue-cli打包之后的dist文件无法运行index.html
- vue-cli构建项目使用 less
- vue-cli 构建的项目中使用 Less
- vue-cli构建项目使用 less的方法
- 使用vue-cli搭建项目的使用,需要引入font-icon文件,报错的解决办法
- 使用VUE-CLI构建一个项目基本的配置
- 使用vue-cli构建的项目不检查分号
- vue-cli构建项目下使用微信分享功能
- 使用vue-cli+axios构建的项目本地环境API代理设置和解决跨域
- 详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
- 使用webpack构建vue-cli项目,写scss脚本语言报错
- vuex在vue-cli和webpack构建的项目中的简单使用
- vue-cli2.x项目优化之引入本地静态库文件的方法
- vue-cli 构建的项目中如何使用 Less
- Vue.js:使用vue-cli快速构建项目
- vue-cli 构建的项目中如何使用 Less
- hexo 构建静态文件无法生成 index.html 等文件
- 关于vue-cli项目npm run build后,index.html无法在浏览器打开
- vue-cli构建vue项目