安装好后package.json多了一行哗哗webpack指令
说明:这里和往后内容使用
cnpm是因为我本地安装淘宝镜像,用cnpm配置安装命令行更顷枣快
安装好后package.json多了一行webpack-dev-server指令
说明:配置好这条指令后就可以在命令板中输入npm run dev运行项目;在浏览器显示的地址是默认的 :8080/;如果不想要默认,可以改端口为:在package.json文件的scripts改dev为:"webpack-dev-server --host 172.172.172.1 --port 8888 --open --config webpack.config.js"
在webpack.config.js配置以下内容:入口配置和出口配置
需要特别注意:dirname前面是有两横(我就设置了一条横线,导致报错,看似小问题,可这坑不小,因为没留意,都找不到这bug)
在index.html中设置以下内容:(需要把main.js入口文件引入index.html文件中)
输入npm run dev运行项目,下面显示命令行是成功调用:
调用成功后自动打开浏览器显示页面内容:端口默认为8080
在main.js文件里修改index.html文件里面的内容,再运行项目看看浏览器显示内容的变化情况:
因为配置webpack-dev-server的热更新功能,修改后浏览器会自动更新修改后的内容:(说明前面的命令行配置成功)
可以按f12,在浏览器的调试模式里查看到websocket
说明:生成目录dist中的main.js,这是个打包过程
已经生成dist目录的mainjs打包文件
配置css-loader命令行
配置style-loader命令行
配置css-loader/style-loader命令行后,在webpack.config.js配置文件里配置loader,增加对.css文乱乎行件的处理
在项目目录下新建一个style.css文件
然后在main.js入口文件里面用import引入:
浏览器自动更新内容的字体样式(启动热更新功能)
此时可以在浏览器可以看到css是通过js动态创建<style>标签来写入的
配置插件后在package.json中有显示配置后的extract-text-webpack-plugin命令行
配置好插件后也需要修改webpack.config.js配置文件为以下内容:
最后在index.html中引入main.css文件(.vue为后缀的文件中的style样式都统一打包在main.css文件中)
需要配置以下的所有命令:例如需要用到.vue文件需要先安装vue-loader、vue-style-loader等加载器并做配置;要使用es6语法,需要安装babel和babel-loader等加载器(注意一条都不能配置漏,不然出现报错可能影响往后的运行与配置):
配置好以上的命令行,package.json添加这些命令行
配置以上命令行后,在webpack.config.js配置文件中设置以下内容:
说明:vue-loader在编译.vue文件时,会对<template>、<script>、<style>分别处理,所以在vue-loader选项里多了一项options来进一步对不同语言进行配置,如在对css处理时,会先通过css-loader解析,然后把处理结果再交给vue-style-loader处理
把app.vue引入入口文件main.js:
浏览器自动更新显示:
在浏览器的调试模式中会看到div标签中出现属性data-v-xxx ,那是因为使用了<style scoped>,样式只作用本组件中;如果去掉scoped,div标签就没有data-v-属性,只是单纯的普通标签<div>文本数据</div>
然后把这两个组件导入app.vue根组件中
配置后需要在webpack.config.js文件中配置test/loader
新建一个image文件夹放图片
在app.vue根组件里面加入img标签
浏览器自动更新显示
配置后在目录新建webpack.prod.config.js生产环境的配置文件(该文件在基本配置文件的基础上扩展)
配置打包依赖后在package.json文件里加入build的快捷脚本打包
补充说明:ejs是一个javascript模板库,用来从json数据中生成html字符串,常用于node.js
npm run build 打包后的静态资源main.css/main.js/jpg(css文件,js文件,图片)
附上github(配置后的项目demo):
https://www.jianshu.com/u/3908e601f4ec
。。。终于完结,感觉码了好久(感谢大家阅读完到这里),以上的内容有不对或者不好地方,欢迎指出,往后还会更新有关vue-router和vuex的文章,希望分享的文章对大家有帮助!
vue项目打包完成后,如需改变配置文件中的信息,比如域名修改(如下图config.js),是不可能在配置文件中直接更改的,因为配置文件是前端写死的,这时只族罩源能手动更改项目中的配置,然后重新打包npm run buildvar packConfig = require('../src/config')//引入原配置文件
var GenerateAssetPlugin = require('generate-asset-webpack-plugin')//引入插件
var createServerConfig = function(compilation){//声明转换函数,将对象转为json字符串
return JSON.stringify(packConfig)
}
plugins里添加
new GenerateAssetPlugin({//生成文件,并添加入内容
filename: 'config.json'闷并,
fn: (compilation, cb) =>{
cb(null, createServerConfig(compilation))
},
extraFiles: []
})
import axios from 'axios'//引入一个ajax封装工具
import storage from 'services/storage'//引入对缓存 *** 作的封装工具兆态
var getConfigJson = function () {
//声明一个函数,用来读取json文件并将其内容存入缓存
axios.get('config.json').then((result) =>{
//读取文件
storage.setItem('config', result.data)
}).catch((error) =>{
console.log(error)
})
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)