精华内容
下载资源
问答
  • Vue脚手架提供了一个命令npm run build进行打包项目,在package.json中有一个build属性,对应执行命令node build/build.js。执行成功后,项目目录下多了一个dist目录,dist目录下有static目录和页面index.html。...

    Vue脚手架提供了一个命令npm run build进行打包项目,在package.json中有一个build属性,对应执行命令node build/build.js。执行成功后,项目目录下多了一个dist目录,dist目录下有static目录和页面index.html。static目录下有css、fonts、js文件。但是这样直接打包后会出现空白界面问题,因此在打包之前需要修改配置文件再打包。空白界面问题主要就是路径的问题,所以需要修改config目录下(使用的是完整的vue init webpack模板才会有config目录)的index.js配置文件里的选项。找到build属性,首先修改静态文件的路径,打包后静态文件在当前目录下,所以修改为./,如图

    4f8ed900834f6a8bcdccd7d72d6683aa.png

    然后将环境设置为生产环境,productionSourceMap修改为false,修改后保存,打开cmd运行的命令cnpm run build打包即可

    a443d1a873d788f60f76b56d7b6b0759.png

    注意下面的提示,这个打包后的文件需要放到服务器才能打开,不能直接使用浏览器打开,打包后的文件结构如图所示。

    f00e1d3287e695c2d871ad0991343e02.png

    打包好的文件放到web服务器上,访问index.html就可以使用WebApp了。访问浏览器,可以开始使用WebApp,打开控制台发现打包后dist目录中的JavaScript文件,CSS文件已经被加载

    693451aec417d92fbd4b3914dfed19a9.png

    2、另外还需要注意一点。src里边router/index.js路由配置里边默认模式是hash,如果你改成了history模式的话,打开也会是一片空白。所以改为hash或者直接把模式配置删除,让它默认的就行 。如果非要使用history模式的话,需要你在服务端加一个覆盖所有的情况的候选资源:如果URL匹配不到任何静态资源,则应该返回一个index.html,这个页面就是你app依赖页面。

    展开全文
  • 错误1:unresolved node modules vue... 或 not found modules..的错误 解决方式:依赖的模块错误,删除node_module文件夹后,尽量用npm install而不是淘宝镜像cnpm安装 错误2:Cannot create symlinks (on ...

    错误1: unresolved node modules vue... 或 not found modules..的错误

    解决方式:依赖的模块错误,删除node_module文件夹后,尽量用npm install而不是淘宝镜像cnpm安装

     

    错误2: Cannot create symlinks (on Windows hosts, it requires admin privileges); skipping mas platform

    解决方式:在项目根目录下以管理权限运行命令行窗口cmd后,输入打包编译语句npm run build即可解决管理员权限问题。此外注意的是及时执行npm run build后,windows系统也不能打包mas或darwin平台应用。

     

    错误3:npm run build进行打时 take it away "electron-builder"后错误

    解决方式:检查具体错误原因,如下图错误可以通过删除重复的进程解决

    其他错误可以通过修改package.json配置文件中buildelectron-builder的版本信息解决

     

    打包成功后:

           

     

     

    问题4:启动项目exe文件后,发现无法调用出开发者工具

    解决方式:a、在electron-vue主进程中添加以下语句

    mainWindow.webContents.openDevTools();
    // 或者mainWindow.openDevTools();
    

      

     

    b、将package.json 中的devDependencies(开发环境使用)这几句添加到dependencies(生产环境使用),重新打包编译后即可调用开发者工具。

    "electron-debug": "^1.5.0",
    "electron-devtools-installer": "^2.2.4"
    

     

     

     

     

     

     

    展开全文
  • // vue.config.js module.exports = { publicPath: './' } 2、不能使用history路由 // ... export default new Router({ // mode: 'history', routes: [ { path: '/', name: 'home', component: Home } ]...

    1、配置输出路径

    // vue.config.js
    module.exports = {
      publicPath: './'
    }
    

    2、不能使用history路由

    // ...
    export default new Router({
      // mode: 'history', 
      routes: [
        {
          path: '/',
          name: 'home',
          component: Home
        }
      ]
    })
    
    
    展开全文
  • Vue前端打包详细流程

    千次阅读 2021-11-15 10:19:16
    前端打包添加打包命令运行打包代码打包指定不同的环境变量打包自定义文件移除三方包gzip压缩打包部署模式 添加打包命令 package.json中添加配置 npm run build 发布到线上的代码 不便于调试 命令: ①npm run build...

    添加打包命令

    package.json中添加配置
    npm run build 发布到线上的代码 不便于调试
    命令:
    ①npm run build:dev 开发调式环境
    ②npm run build:prod 线上调试环境
    在这里插入图片描述

    	"build:dev": "vue-cli-service build --mode dev",
        "build:prod": "vue-cli-service build --mode prod"
    

    运行打包代码

    不可直接双击dist/index.html
    需要放在http容器中运行:serve tomcat nginx iis
    本次使用serve

    下载serve: npm i -g serve

    报错
    Error: EPERM: operation not permitted, mkdir ‘C:\Program Files\nodejs\node global\node_modules.staging’
    在这里插入图片描述
    解决: 用户—>个人用户—>删除.npmrc文件

    启动打包后的目录: serve dist
    在这里插入图片描述

    打包指定不同的环境变量

    添加环境变量
    ① 开发:在根目录下创建 .env.dev 文件(与package.json中mode对应)
    ② 线上:在根目录下创建 .env.prod 文件(与package.json中mode对应)
    在需要动态指定变量的位置使用process.env.NODE_ENV等
    在这里插入图片描述

    在这里插入图片描述

    // .env.dev
    ##开发环境
    NODE_ENV=development
    ##变量以VUE_APP_开头
    VUE_APP_URL=http://www.dev.com
    
    // .env.prod
    ##生产环境
    NODE_ENV=production
    VUE_APP_URL=http://www.prod.com
    

    打包自定义文件

    vuecli是基于webpack
    vuecli零配置
    不需要零配置可以指定vue.config.js

    npm run build:prod 少了注释、空行、压缩等

    移除三方包

    代码细分
    ①三方包:vue elementui axios等
    ②开发代码:自己写的
    移出三方包: 使用三方提供cdn(免费、收费)
    步骤:
    ①找到三方包cdn资源,添加到public/index.html
    ②把之前import导入的删除
    ③在vue.config.js配置排除三方包

    module.exports = {
      // 打开文件访问的相对路径 独立项目 通过项目根目录访问
      publicPath: './',
      // 开发时需要 线上不需要 map-->提供代码映射 方便调试代码
      productionSourceMap: process.env.NODE_ENV == 'development' ? true: false,
      // 配置webpack
      configureWebpack: config =>{
        // config---vuecli默认配置
        Object.assign(config,  {
          // 排除依赖包
          externals: {
            vue: 'Vue'
          }
        })
      },
    }
    

    gzip压缩

    下载 npm i -D compression-webpack-plugin

    打包发生错误:
    ERROR TypeError: Cannot read property ‘tapPromise’ of undefined
    TypeError: Cannot read property ‘tapPromise’ of undefined

    在这里插入图片描述
    错误原因: 脚手架配置gzip打包不支持这个版本
    解决: 使用npm install compression-webpack-plugin@6.1.1 --save-dev
    在vue.config.js配置

    打包会生成gz结尾的文件在这里插入图片描述

    let CompressionWebpackPlugin = require('compression-webpack-plugin')
    
    configureWebpack: config =>{
        let plugins = [
          new CompressionWebpackPlugin({
            // 压缩方式
            algorithm: 'gzip',
            // 匹配压缩文件
            test: /\.js$|\.css$/,
            // 对于大于10k压缩
            threshold: 10240 
          })
        ]
        if(process.env.NODE_ENV == 'production') {
          config.mode = "production"
          config.plugins = [...config.plugins, ...plugins]
        } else {
          config.mode = 'development'
        }
      },
    
    

    浏览器查看
    请求头:Accept-Encoding: gzip, deflate, br
    响应头:Content-Encoding: gzip
    在这里插入图片描述

    打包部署模式

    hash: 打包后dist直接在http容器中运行 线上一致

    history: 打包后脚手架刷新不会404 线上会404
    解决方案:需要前端代码与后端一起部署 由后端负责跳转前端

    展开全文
  • vue项目打包流程

    千次阅读 2021-01-09 16:56:45
    vue项目打包流程 二、打包优化 1.首先在根目录下面创建一个vue.config.js文件 2.去除.map文件,在vue.config.js文件里面抛出一个对象,然后把下面两段代码写到对象里面,然后在控制台或者终端通过npm run build命令...
  • 打包自己vue组建时,遇到一个问题,项目内的css文件无法单独打包出去。看到其他人的项目,都是install之后,可以引入一下js,引入一个css文件,就可以使用了。这块自己也研究了一下,如何vue组件项目中样式单独...
  • 本文假定读者已经能够顺利开发Vue(2.x)项目,并期望使用Electron把项目打包成桌面客户端的形式(Windows平台,64位)。 项目准备 确保现有的Vue项目已经能够正常运行并可通过npm run build命令进行编译部署,这里...
  • vue 项目打包 报错

    2021-10-26 14:39:54
    如下图所示: 这里是因为找不到正确的路径,导致报错。...2、在vue.config.js里 将publicPath: "/" 改为publicPath: "./" ,之后重新打包,npm run build 即可。 publicPath: "/" =====>>...
  • VUE打包 VUE2与VUE3

    2021-04-14 14:12:14
    VUE3 vue cli 真的挺全家桶的 路由 #本地构建 npm run build #打包 npm run serve VUE2 常用指令# 查看 npm config get registry # 清除缓存 npm cache clean --force # 查看是否有缺少版本 npm ls --...
  • 官网教程 官网给了多种部署方案,这里我才用的是部署到github上 在你的项目中,创建一个如下的 ...cd docs/.vuepress/dist # 如果是发布到自定义域名 # echo 'www.example.com' > CNAME git init git add -A
  • 最近用vue做一个项目,刚开始没想到后台用的微擎,不能前后端完全独立。而且 index.html 页面放在template文件夹中,而静态的css和js等文件则放在 /addons/business/static 中,webpack默认打包出来js中的路径则是 /...
  • Vue 项目在开发时运行正常,打包发布后却出现各种报错,这里整理一下遇到的问题,以备忘。1、js 路径问题脚手架默认打包的路径为绝对路径,改为相对路径。修改 config/index.js 中 build 节点下 assetsPublicPath,...
  • 1.项目打包 ** 终端运行命令 npm run build 打包成功的标志与项目的改变,如下图: 点击index.html,通过浏览器运行,出现以下报错,如图: 解决: 修改 1、查看package.js文件的scripts命令 2、打开webpack.dev...
  • vue项目打包后 修改配置

    千次阅读 2021-10-26 17:59:26
    在使用vue.js开发前端项目时,再结合webpack搞起各种依赖、各种插件进行开发,无疑给前端开发带来了很多便捷,就在解决跨域这个问题上,相信众多用vue.js的前端同僚们同我一样尝到了甜头,开发环境全靠proxyTable...
  • 本地运行打包: npm run build!!! 一般项目都会配置一个打包的脚本 , ===================================== 服务器上面如何打包vue?
  • 此时需要修改nginx配置以及Vue打包配置。 1、 nginx配置 只需要添加一条location规则,分配访问路径和指定访问文件夹。我们可以把/test指向之前创建的/www文件夹,这里因为文件夹名称和访问路径不一致,需要用到...
  • Vue项目打包路径问题

    千次阅读 2020-12-22 21:43:58
    最近在搞Vue CLI的项目打包,出现了常见的路径问题,经过研究问题和文档,现在有了自己的看法,以下所有内容都是建立在Vue CLI3之上。关于vue.config.js文件:这个文件的配置主要是用来设置打包的文件相关信息的命令...
  • vue快速打包(优化)

    2021-10-19 15:43:59
    vue.config.js const path = require("path"); module.exports = { // 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致 publicPath: "./", // 输出文件目录 outputDir: "dist", // ...
  • VUE打包发布
  • vue项目打包到上线

    千次阅读 2020-12-31 07:51:09
    vue项目打包到上线的基础做法总结1、开发环境到生产环境的转变项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发路径切换为线上路径。打开项目中config文件夹里面的 dev.env.js 文件。...
  • vue项目打包后卡死

    2021-11-25 05:26:50
    使用ElementUi开发后台本地是好的,打包后有一个页面打开就卡死浏览器,经排查发现在是由于引起的。 将vuevue-template-compiler element-ui升级,发现问题还是存在。 "vue": "^2.6.10", "element-ui": "^2.13.2", ...
  • vue 配置打包时间

    2021-03-19 14:28:45
    vue.config.js chainWebpack(config) { config.plugin('html').tap(args => { const date = new Date() args[0].createDate = date return args }) index.html <meta name="time" content="<%=...
  • vue-cli项目用npm run build打包后,直接运行dist里面的indx.html文件,页面报无法访问你的文件,控制台报不允许加载本地资源。 原因: 一直以为是路径配置有误,后来百度发现是vue-router的模式设置问题。我把vue...
  • 使用原生JavaScript+webpack5+vue3做vue3插件测试: 使用webapck5插件: 一定要查看是不是vue3,如果是vue2会编译器不一样 "vue": "^3.2.8", "vue-loader": "^16.5.0", "webpack": "^5.52.0", "@vue/compiler...
  • vue项目打包分析

    2021-04-02 15:33:03
    修改package.json中的script,在build后面加个--report "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build --report", "lint": "vue-cli-...这样打包文件里就会生成一个r...
  • 4. 进行Vue项目的打包部署 因为我只是单纯的想试下平时我们打包好的dist文件是怎样部署到服务器,并让它跑起来的,所以我就选择了华为云服务器里面开发版试用一个月的免费服务器; 1. 服务器准备 在华为云官网...
  • 问题描述:打包成app后使用input上传图片只能做到在文件夹中选取,不能实现拍照上传图片解决方案:1.利用HTML5 Plus的Camera调用相机2.利用HTML5 Plus的IO来实现读取拍照所得的图片文件3.使用base64上传图片...
  • vue项目打包清除console

    2020-12-19 19:29:04
    第一步 第二步 代码送上 plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin... // 打包去除console new UglifyJsPlugin({ uglifyOptions: { compress: {
  • vue项目打包内存溢出

    2020-12-31 18:24:22
    项目过大,启动项目 npm run dev,会抛出内存溢出,需要扩展node服务器内存. 扩展内存: 1 先打开cmd全局命令窗口,输入 npm install -g increase-memory-limit 2 进入项目文件夹运行 increase-memory-limit (内存扩展...
  • 有一点需要注意的是,平时在Vue项目里,组件的name可以不写,但如果要打包成库,组件的name必须写。为了描述方便,我们把将要打包的组件定义为MyCom1、MyCom2。其示例代码如下: <template> <div> &...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 95,264
精华内容 38,105
关键字:

vue无法打包

vue 订阅