导航:首页 > 文件管理 > vuewebpack打包入口文件是哪个

vuewebpack打包入口文件是哪个

发布时间:2023-05-19 17:08:24

A. vue打包后生成可配置文件,用于修改接口路径等

vue打包发布后,如果接口地址等发生变更,需要重新打包,过于繁琐。因此需要将一些例如接口地址、网站参数等拿出来动态配置。

具体步骤如下:

1、安装generate-asset-webpack-plugin插件

npm install generate-asset-webpack-plugin --save-dev

2、在vue.config.js中配置如下:

3、使用

在main.js中全局引入

4、打包后dist下生成.json文件,修改接口后生效

如果你有更好的方法也请留言哦。。。

B. vue2.0用脚手架搭建的官方例子怎么用webpack打包 如何配置

前言 vue2 然后通过以下命令安装 webpack cnpm install webpack -g 注:下面 orange 默认给出 npm 的安装方案,安装失败请自行转为 cnpm 安装 在需要创建工程的位置运行 vue init webpack-simple 工程名字<工程名字不能用中文> 或者创建 vue1.0 的项目,只需将命令换成 vue init webpack-simple#1.0 这里我们基于 2.x 开发的,直接使用第一种方法创建工程即可,下图是创建工程时的截图,需要你添加 Project name,Project description,Author. 图中已经给出下一步应该操作的步骤,我们按照步骤一步一步执行,这里 orange 不给大家一步一步列出。 注意:这里一定要使用 npm install 安装官方库,而不要使用淘宝镜像,会导致部分依赖丢失。 安装完成后,目录如下图。 然后我们运行我们的项目后浏览器会自动弹出,并展示以下页面 这里注意观察,默认给我们八个链接,可以根据这几个链接获得我们想要的学习资源,上面是必要的的链接(官方文档以及关注 vue 动态),下面是 vue 的生态系统,大家亲切的叫它们为全家桶。 二、Vue 全家桶 我们接下来介绍全家桶的安装(使用详情大家可以去初始页面的链接查看) 一句命令搞定全家桶 npm install vue-router vue-resource vuex --save package.json 已经加入了我们的全家桶,node_moles 目录下也有对应的依赖包,注意这里现在还不能用扩展之后的方法,因为我们没引入到项目中来。 src/main.js 修改如下 import Vue from 'vue' import VueResource from 'vue-resource' import VueRouter from 'vue-router' import Vuex from 'vuex' import App from './App.vue' Vue.use(VueResource) Vue.use(VueRouter) Vue.use(Vuex) new Vue({ el: '#app', render: h => h(App) }) 这时我们的项目就能运行对应的扩展方法了 三、集成 Sass 作为移动端的开发怎么能缺少 css 预编译语言。sass 安装需要几个依赖。 我们干脆在 package.json 把版本写死,然后通过 npm install 安装 在 "devDependencies": {} 中添加下面几个依赖 "node-sass": "^3.8.0", "sass": "^0.5.0", "sass-loader": "^4.0.0", 好,我们 npm install 后,就可以正式使用 sass 啦 四、目录结构建议 依赖的安装到这里差不多结束了,其它大家需要的可以自定义安装 下面给出我的目录建议供大家参考, 这里的 img 目录放置图片,script 目录放置公共的工具函数,style 目录放置我们的 sass 文件, 你查看 App.vue 文件时不难发现,默认的把样式文件给到了模块里,这样样式一直跟着模块 orange 建议大家不要这样做,因为这样十分不利于样式的模块化,注意区分与模版模块化的区别, 我们单独设置 style 目录,并在目录当中对 sass 进行模块化处理(通过 import 引入 sass 模块) 对应的 App.vue 也变得非常简洁,代码如下 <style lang="sass"> @import "/style/base.scss"; </style> 五、rem 适配 对于移动端的开发,rem 适配必不可少,我们可以用多种方式实现,下面给出一种方案 在 index.html 中添加如下代码 <script> let html = document.documentElement; window.rem = html.getBoundingClientRect().width / 16 ; html.style.fontSize = window.rem + 'px'; </script> 这里基于宽 320px 的屏幕分成了 16 份,也就是 1rem = 20px,目前大多数设计稿都是根据 iphone6 的宽( 375px )走的,建议大家在这里分成 25 份,也就是 1rem = 15px,计算起来方便些。 简单说下 rem 原理:根据 html 的 fontSize 属性值为基准,其它所有的 rem 值,根据这个基准计算。 我们根据屏幕宽度用 js 动态修改了 html 的 fontSize 属性值,达到移动端适配的目的 总结 以上就是这篇文章的全部内容了,本文作为移动端配置的基础篇,深入了解框架后才能继续构建网站,希望这是一个好的开始,有了这个架子再填充代码就方便了许多,不用再去考虑开发环境问题了。希望本文的内容对有需要的朋友们能有所帮助。

C. webpack怎样配置出入口文件

//出口文件
mole.exports={
//入口文件
entry:”./src/index.js”//入口文件路径
}
//出口文件配置
output:{
path:path.resolve(__dirrname,”dist”),
//打包文回件的绝对路答径
filename:”build.js”
//打包的文件名
}
mole: {
rules: [{
test: /\.css$/, //压缩css
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|gif|jpeg|mp4)$/,//压缩图片
use: 'file-loader'
}]
} (BY三人行慕课)

D. 手把手 教你一步步--搭建vue脚手架,配置webpack文件

说明:配置后项目里面就多了package.json文件

安装好后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的文章,希望分享的文章对大家有帮助!

阅读全文

与vuewebpack打包入口文件是哪个相关的资料

热点内容
windows7系统共享文件 浏览:62
ps前往文件夹 浏览:694
信捷plc编程用哪个软件 浏览:939
vba导入文件 浏览:690
更新后版本英文怎么说 浏览:267
桌面云配置文件分离 浏览:505
iphone5如何升级4g网络 浏览:5
团购是在哪个app 浏览:897
打开多个word文档图片就不能显示 浏览:855
腾讯新闻怎么切换版本 浏览:269
app安装失败用不了 浏览:326
桌面文件鼠标点开会变大变小 浏览:536
手机误删系统文件开不了机 浏览:883
微信兔子甩耳朵 浏览:998
android蓝牙传文件在哪里 浏览:354
苹果6s软解是真的吗 浏览:310
c语言代码量大 浏览:874
最新网络卫星导航如何使用 浏览:425
以下哪些文件属于图像文件 浏览:774
zycommentjs 浏览:414

友情链接