精华内容
下载资源
问答
  • 结合使用 DCloud 平台 1:在 HBuilder 中打开 dist 目录(拖拽进来) ​ 点击manifest.json 文件, 应用名称,改为:头条App 图标配置:选图片,建议为1024*1024;点击自动生成所有图标并替换 此时,dist文件夹下会...

    五、发布 移动APP

    发布移动 App
    结合使用 DCloud 平台

    1:在 HBuilder 中打开 dist 目录(拖拽进来)

    ​ 点击manifest.json 文件,

    • 应用名称,改为:头条App
    • 图标配置:选图片,建议为1024*1024;点击自动生成所有图标并替换
      • 此时,dist文件夹下会自动生成unpackage图标文件夹
    • 启动图配置,需要美工UI提供不同尺寸图,因不能自动生成
    • 应用是否全屏显示,进行选中-手机状态栏被覆盖

    2:选择 发行 -> 原生 App(云打包)

    • 选择Android模式-公共证书-去除广告-打包按钮

    3:等待打包下载链接地址,拿到打包的文件拖拽到夜神模拟器进行安装

    4:点击app图标,检测:启动图正常

    5:最后去手机安装测试

    6:最后根据需要发布到应用商店

    展开全文
  • vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法 1,插件安装 webpack插件安装 filemanager-webpack-plugin,该插件可执行打包,复制,移动,删除文件以及新文件夹...

      用vue2.0开发项目,使用npm run build 命令 ,但是只会生成dist文件夹,以下是生成zip压缩包方法

    1,插件安装

     webpack插件安装 filemanager-webpack-plugin,该插件可执行打包,复制,移动,删除文件以及新文件夹在build之前及之后创建。

    安装:      npm install filemanager-webpack-plugin --save-dev  或 npm install filemanager-webpack-plugin --save-dev

     2.webpack配置

     1)在项目 根目录 build/webpack.base.config.js 中抬头变量声明区域添加

     

    const FileManagerPlugin = require('filema nager-webpack-plugin')

     

    2) 在根目录 build/webpack.base.config.js 内找到 module.exports。 然后在plugins内添加

      new FileManagerPlugin({
          onEnd: {
              delete: [
                  './dist/mydemo.zip',
              ],
              archive: [
                  {source: './dist', destination: './dist/mydemo.zip'},
              ]
          }
      })

    若 plugins不存在,则新建plugins,plugins为数组格式。

     

    3.执行效果 
    配置完成后,重新执行 npm run build 命令 执行完后 ,在dist文件夹内(上面配置的目的地目录为 dist文件夹)就可以看到

     





    转载于:https://www.cnblogs.com/ganws/p/11137981.html

    展开全文
  • 开发是使用vscode开发的,打包使用hbuilder打包成app,在vscode 运行 npm run build 生成dist目录拷贝到hbuilder里面打包app,app出现了空白; 最后使用浏览器看是静态资源没有加载,就像应该了build的时候问题,...

    开发是使用vscode开发的,打包使用hbuilder打包成app,在vscode 运行 npm run build 生成dist目录拷贝到hbuilder里面打包app,app出现了空白;

    最后使用浏览器看是静态资源没有加载,就像应该了build的时候问题,最后修改了build路径

    改了就好了

    展开全文
  • 一.Webpack的安装 webpack安装依赖nodejs,下面介绍是基于系统已安装node.js webpack3.6.0 是vue cli2脚手架...当进行模块化开发时,js代码之间有依赖(CommonJS或ES6模块化开发),我们可以将依赖的js文件打包成一个文

    一.Webpack的安装

    webpack安装依赖nodejs,下面介绍是基于系统已安装node.js
    webpack3.6.0 是vue cli2脚手架依赖的版本
    npm install webpack@3.6.0 -g(全局安装)

    二.webpack模块化开发基本目录结构

    下面是一个最基础的webpack目录结构
    在这里插入图片描述
    src 源代码放置目录
    dist(distribution发布)代码发布目录

    当进行模块化开发时,js代码之间有依赖(CommonJS或ES6模块化开发),我们可以将依赖的js文件打包成一个文件,然后在index.html引用打包后的文件

    webpack .\src\main.js .\dist\boundle.js
    

    三.使用webpack.config.js配置文件

    webpack.config.js这个js文件就是打包时的配置文件,设置打包入口entry,和打包后代码存放的路径output等,如下是一个简单的配置

    const path = require('path')
    
    module.exports = {
        entry: './src/main.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js',
            publicPath: 'dist/',
        },
        module:{
            rules:[
                {
                    test: /\.css$/i,
                    use:['style-loader','css-loader']
                    // css-loader只负责将css文件进行加载
                    // style-loader负责将样式文件添加到DOM中
                },
                {
                    test: /\.less$/i,
                    use:['style-loader','css-loader', 'less-loader']
                    // css-loader只负责将css文件进行加载
                    // style-loader负责将样式文件添加到DOM中
                },
                {
                    test: /\.(png|jpg|gif)$/i,
                    use: [
                      {
                        loader: 'url-loader',
                        options: {
                          limit: 8196,
                          name: 'img/[name][hash:8].[ext]'
                        },
                        
                      }
                    ]
                },
                // {
                //     test: /\.(png|jpg|gif)$/i,
                //     use: [
                //       {
                //         loader: 'file-loader',
                //         options: {}
                //       }
                //     ]
                // }
                {
                    test: /\.m?js$/,
                    //打包时排除node_modules中的js文件
                    exclude: /(node_modules|bower_components)/,
                    use: {
                      loader: 'babel-loader',
                      options: {
                        presets: ['es2015']
                      }
                    }
                },
                {
                  test: /\.vue$/i,
                  use: ['vue-loader'],
                }
            ],
        },
        // 开发时的vue依赖版本,vue.esm.js支持template的complier
        resolve:{
          extensions: ['.js', '.css', '.vue'],
          alias:{
            'vue$': 'vue/dist/vue.esm.js'
          }
        }
    }
    

    四.webpack、node、npm关系

    node.js 是一个运行在服务端的javascript运行环境,是javascript运行的载体
    webpack是前端代码打包工具,可以对模块化js,css,图片等进行打包,模块依赖进行解析
    npm是node package manager,即node.js包管理器

    npm init:是包管理初始化,会进行包名,版本,入口等参数进行设置,执行该命令后会生成一个package.json文件,其中scripts就是npm run执行的命令,用来简化webpack运行命令

    五.css文件打包

    webpack中loader
    webpack处理less文件
    less-loader如果项目中我们想用less,scss,stylus来书写样式,webpack是可以处理的,只不过要安装对应的loader,以less文件为例

    css-loader只负责将css文件进行加载
    style-loader负责将样式文件添加到DOM中

    图片文件处理
    url-loader 其中图片文件大小小于limit中指定的图片大小阈值,将图片编译成base64显示
    file-loader 图片大小大于阈值,直接加载指定路径下的图片

    五.ES6语法转es5

    webpack中es6语法转es5可以通过babel工具进行转化

    npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
    

    安装完这些依赖的loader后再次打包即可将es6语法转成es5

    六.Webpack中使用Vue配置

    webpack中集成Vue.js
    npm install vue --save,这时候就会将vue安装到node_modules下,然后我们就可以通过import Vue from ‘vue’导入Vue对象

    组件化开发loader依赖
    vue-loader vue文件加载依赖
    vue-template-compiler vue文件代码编译依赖

    npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev
    

    七.组件化开发.vue文件基本格式

    <template>
        <div>
            <h2 class="title">{{msg}}</h2>
            <button @click="btnclick">按钮</button>
            <Cpn></Cpn>
        </div>
    </template>
    
    <script>
        import Cpn from './Cpn'
        export default {
            name: 'App',
            components: {
                'Cpn': Cpn
            },
            data(){
            return {
                    msg: 'i love you'
                }
            },
            methods:{
                btnclick(){
                        alert("hello")
                    }
                }
            }
    </script>
    
    <style scoped>
        .title {
            color: green;
        }
    </style>
    
    
    展开全文
  • Vue打包优化(webpack)

    2020-10-30 19:41:26
    项目默认用vue-cli新建的项目,很多人直接用npm run build就打包成dist,然后部署到服务器上了,其实,这是不妥当的,没有任何打包优化,从而会导致首屏加载缓慢等性能问题; 所以需要做些优化配置后再打包,具体...
  • Vue 移动端打包成apk

    2021-04-12 21:53:30
    Vue 移动端打包成apk如何将Vue 移动端打包成apk打包配置打包使用HuilderX进行打包打包 云配置 如何将Vue 移动端打包成apk 打包配置 dex.js的build下的assetsPublicPath修改为如图(解决打包空白) 将webpack.prod....
  • 将移动端页面打包成app 1、使用 HBuilder 直接编译打包 点击左上角 文件》打开目录》选择目录 选择用Webpack打包好的dist文件目录 由于我添加到项目了,所以会显示该项目名称已存在,请重新输入。 2、接着...
  • filemanager-webpack-plugin插件的使用方法:vue-cli@3.0 直接打包成zip压缩文件 正文 使用"npm i"命令安装所有依赖,然后使用“npm run serve”命令运行本地服务器,但是不能正常启动,报以下错误: 原因 项目使用...
  • 打包成dist文件夹(要在项目路径下执行): npm run build 执行命令:serve dist 访问: http://localhost:5000 即可 发布 2: 使用动态 web 服务器(tomcat) 修改配置: webpack.prod.conf.js output: { publicPath: '/...
  • 前后端项目分离打包(vue+springboot)

    千次阅读 2019-05-04 17:20:55
    一般做法:前端用 webpack打包完生成 dist 内容后 手动 复制 dist 文件夹的内容到后端项目的 main/resources/public中。 推荐做法,使用 maven 插件来自动管理: 前端转 maven 项目,加入前端的 maven 插件,支持...
  • .vue .sass 等很多文件浏览器识别不了,需要编译打包成js文件的工具 使用 打包时会从入手文件开始,找相互依赖的文件 全局安装 npm install webpack webpack-cli -g 当前目录下安装 npm install webpack webpack-...
  • vue项目部署到tomcat中

    2019-11-19 17:13:15
    前端工程使用webpack打包dist文件夹下,再将statis和index.html放置到nginx等服务中。对于后端开发者而言,将后端和前端统一部署在tomcat下的有点如下: tomcat包解压即用非常方便 无需再安装nginx服务(若机器上...
  • VUE项目部署到tomcat服务器-前端配置

    千次阅读 2020-04-25 11:14:15
    前端工程使用webpack打包dist文件夹下,再将statis和index.html放置到nginx等服务中。对于后端开发者而言,将后端和前端统一部署在tomcat下的有点如下: tomcat包解压即用非常方便 无需再安装nginx服务(若机器...
  • 仅运行时:使用仅运行时版本的Vue.js的时候,通常需要通过如webpackvue-loader工具把.vue文件编译JavaScript,因为在编译阶段做的,所以它只包含运行时的Vue.js代码,因此代码体积也会更轻量。 Runtime + ...
  • vuecli2 的项目中 找到 build/build.js,在webpack(webpackConfig, cb) 的 回调函数cb中添加 const exec = require('child_process').exec exec('cd .\\dist && del dist.zip', function(error) { if ...
  • 所以如果你只是单纯地将所有内容打包成同一个文件,那么 hash 就能够满足你了,如果你的项目涉及到拆包,分模块进行加载等等,那么你需要用 chunkhash,来保证每次更新之后只有相关的...
  • 部署Vue项目

    2019-09-25 02:51:35
    刚接触webpack,不知道怎么部署前端文件,原以为需要将app文件上传,在inux上安装node,以及npm install 一系列的包,捣鼓了很久,发现只需要执行 npm run build 将源码打包成一个静态文件即可,上传静态文件dist,...
  • 组件懒加载也叫按需加载; 当打包构建应用时,js 包会变得非常大,影响页面加载。...解决方案:使用 vue 的异步组件和 webpack 的代码分割功能,实现路由组件的懒加载; 下面通过 vue 的异步加载和 webpa...
  • 然后再将读取的 Buffer 转 Uint8Array 再转 AudioBuffer ,然后连接到音频输出上进行播放就行了。大概逻辑如下: <pre><code>js const AC = new window.AudioContext(); const analyser = ...
  • import 'pl-table/themes/index.css' // 引入样式(必须引入),vuecli3.0不需要配置,cli2.0请查看webpack是否配置了url-loader对woff,ttf文件的引用,不配置会报错哦 import 'pl-table/themes/plTableStyle.css'...
  • 后续使用了cdn在线获取vue相关类库,并且文件打包后启用了服务端gzip压缩(打包使用node server.js测试) webpack优化 2. 你能从此项目中学到什么? 熟悉一个项目的开发流程 学会组件化、模块化、工程化的开发...
  • 主应用需要用到elementui,暂时使用vue2.0+qiankun2.0版本。vue3.0beta体验在下面【子应用构建】章节 主应用项目主要在5个文件:utils文件夹,app.vue,appRegister.js,main.js,render.js 前提条件 cnpm i ...
  • // 把子应用打包成 umd 库格式 library: `${name}-[name]`, libraryTarget: 'umd', jsonpFunction: `webpackJsonp_${name}`, }, }, }; 注意 output 必须按照规定格式要求配置; 经过上述改造,一个简易的微前端...
  • 前面立项前也是构思使用H5+和MUI来做开发的,但是由于某些因数最终是用了vue3,将webpack打包之后的dist再拿到Hbuilder打包成APP。期间确实有一些需要解决的问题,例如微信支付的应用签名,APK的...
  • vue cli2 的项目中 找到 build/build.js在webpack(webpackConfig, cb) 的 回调函数cb中添加const exec = require('child_process').execexec('cd .\\dist && del dist.zip', function(error) {if (error)...

空空如也

空空如也

1 2
收藏数 27
精华内容 10
关键字:

vue使用webpack打包成dist

vue 订阅