精华内容
下载资源
问答
  • config/index.js '/'改'./' build: { assetsPublicPath: './' } build/utils.js ExtractTextPlugin.extract 添加 publicPath: '../../' if (options.extract) { return ExtractTextPlugin.extract({ use...

    config/index.js  '/'改为'./'

    
    
    build: {
        assetsPublicPath: './'
    }

    build/utils.js   ExtractTextPlugin.extract  添加 publicPath: '../../'

    if (options.extract) {
            return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader',
            //设置css中的路径
            publicPath: '../../'
          })
    } else {
          return ['vue-style-loader'].concat(loaders)
    }

     

    展开全文
  • Vue打包后生成的dist文件中的index.html,双击在浏览器中打开后发现一片空白,打开控制台有很多报错:“Failed to load resource: net::ERR_FILE_NOT_FOUND”。这是因为dist文件是需要放在服务器上运行的,资源默认...

    index.html为什么打不开?

    Vue打包后生成的dist文件中的index.html,双击在浏览器中打开后发现一片空白,打开控制台有很多报错:“Failed to load resource: net::ERR_FILE_NOT_FOUND”。

    这是因为dist文件是需要放在服务器上运行的,资源默认放在根目录下。打开index.html可以发现,css和js文件的引用使用的是绝对路径,例如:,对本地磁盘来说,/指向磁盘根目录,所以找不到引用的文件。

    有以下解决方案:1. 使用http-server创建一个服务器来访问资源;2. 将index.html中资源引用的绝对路径改为相对路径;3.还可以手写一个简单的node服务器。

    使用http-server

    http-server是一个基于命令行的http服务器。使用方法很简单:

    安装:npm install http-server -g

    进入dist文件夹:cd dist

    执行命令:http-server

    大功告成!可以打开浏览器在localhost:8080中查看了。

    将绝对路径改为相对路径

    可以选择手动将index.html中所有引用资源的地方全部改成相对路径,如:或。

    当然,更优雅的做法是修改项目的publicPath:

    // vue.config.js

    module.exports = {

    // ...

    publicPath: './'

    // ...

    };

    复制代码

    此时再运行npm run build打包后,打开dist/index.html发现所有资源的引用形式已经变为相对路径:,此时可以双击index.html在浏览器中正常访问了!

    手写一个简单的node服务器

    在dist同级目录中新增文件server.js:

    // server.js

    // 1. 引入接下来要用到的node内置模块

    const http = require('http');

    const url = require('url');

    const path = require('path');

    const fs = require('fs');

    // 2. 利用path解析当前目录,然后拼接dist目录,使得服务器当前的根目录变为dist

    const root = path.join(path.resolve(process.argv[2] || '.'), 'dist');

    // 3. 创建http服务器

    const server = http.createServer((request, response) => {

    // 4. 解析请求url获取文件路径

    const pathname = url.parse(request.url).pathname;

    const filepath = path.join(root, pathname);

    // 5. 使用fs文件系统模块读取index.html文件并返回给前端

    fs.stat(filepath, (err, stats) => {

    if (!err && stats.isFile()) {

    // 响应头设为200

    response.writeHead(200);

    // 创建一个读写流管道,将index.html文件内容写入response并返回

    fs.createReadStream(filepath).pipe(response);

    } else {

    // 请求路径不对时返回404

    response.writeHead(404);

    response.end('404 Not Found');

    }

    });

    });

    // 6. 服务器监听8080端口

    server.listen(8080);

    复制代码

    命令行定位到server.js同级目录中执行node server.js,此时在浏览器中可以访问http://localhost:8080/index.html查看效果。

    展开全文
  • Vue项目打包成移动端APP

    万次阅读 多人点赞 2019-09-25 20:50:14
    Vue项目打包成移动端APP 需要准备的工具:Hbuilder 目录 Vue项目打包成移动端APP 首先打包vue到dist目录 然后再Hbuilder中打开dist目录 然后将dist包含的 web项目 转换 移动 APP项目 前几步配置完成后,就...

    Vue项目打包成移动端APP

    需要准备的工具:Hbuilder

    目录

    Vue项目打包成移动端APP

    首先打包vue到dist目录

    然后再Hbuilder中打开dist目录

    然后将dist包含的 web项目 转换为 移动 APP项目

    前几步配置完成后,就可以在手机上进行真机调试了

    真机测试没有问题,就可以进行下一步---》打包apk了

    最后将apk安装包安装到手机上就可以正常使用了


    首先打包vue到dist目录

    npm run build

    然后再Hbuilder中打开dist目录

    首先可以看到dist目录的图片是一个 W 字样的图标,表示这是一个 web项目

    然后将dist包含的 web项目 转换为 移动 APP项目

     此时可以看到dist目录的文件图标由 W 变成了 A,说明此时的web项目已经变成了移动APP项目 ,而且此时生成了一个新的文件manifest.json

    下面要做的就是在manifest.json中配置移动APP所需要的配置项

    应用信息配置

    appid需要登录后才能获取

    图标配置

    启动图片

    SDK配置

    模块权限配置

    页面引用关系

    页面引用关系分析并不是完全正确的,对于未被检测到文件需要手动添加到打包项目中去

    代码视图

    此视图中会显示所有的配置信息

    前几步配置完成后,就可以在手机上进行真机调试了

    首先使用usb数据线连接自己的手机,然后将手机设置为开发者模式中的USB调试模式

    接下来就是启动Hbuilder真机调试了

    连接后,会在手机上自动安装一个HbuilderAPP,用于真机调试

    真机测试没有问题,就可以进行下一步---》打包apk了

    菜单栏点击【发行】【云打包-打原生安装包】

    最后将apk安装包安装到手机上就可以正常使用了


    Vue打包成.apk安装的过程中遇到的问题

    问题1:打包成的apk在真机上显示空白界面

    原因:项目文件路径引用错误,导致文件加载为404

    vue打包后的文件时存在于dist目录下的,也就是说dist目录作为根目录。

    在dist目录中启动一个本地服务其访问地址为http://localhost:8080/index.html,即可访问首页dist目录下的index.html文件并加载对应的js,css文件,也就是说文件启动根目录是和dist目录中的index.html是平级的。

    - dist
    -- css
    -- img
    -- js
    -- index.html
    -- 启动的根目录

    而打包成apk文件后在真机上测试,其访问的地址为http://localhost:8080/dist/index.html,多了一层dist,导致页面空白,加载的文件为404找不到,也就是说打包后的启动目录的根目录是个dist平级的不是和dist目录中的index.html平级。

    - dist
    -- css
    -- img
    -- js
    -- index.html
    - 启动的根目录

     解决方法:

    在vue打包成dist文件前,修改vue.config.js配置文件,将打包文件的资源文件更改为当前目录下的绝对路径

    mudule.exports = {
        // publicPath: '/',
        publicPath: './'
    }

    问题2:首屏展示后,路由无法跳转,点击无效

    原因:文件动态加载的资源地址404找不到

    因为动态加载的资源地址为http://localhost:8080/css/xxx.css和http://localhost:8080/js/xxx.js,而实际上文件的资源路径是http://localhost:8080/dist/css/xxx.css和http://localhost:8080/dist/js/xxx.js说加载动态加载的资源均为404

    解决方法:

    更改vue项目中的路由模型配置:将H5的历史记录模式改为hash模式

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    const router = new VueRouter({
        // mode: 'history',
        mode: 'hash'
    })
    
    export default router

     

     

     

     

    展开全文
  • 主要介绍了vue项目打包后提交到git上什么没有dist这个文件的解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 材料:1、VUE项目(本地已测)2、nginx(linux版)3、浏览器过程:1、编译VUE项目在项目根目录下,执行npm run build,生成dist文件夹复制dist中的static、index.html到服务器相应位置(自定义)本文:/home/xxx/vue_...

    材料:

    1、VUE项目(本地已测)

    2、nginx(linux版)

    3、浏览器

    过程:

    1、编译VUE项目

    在项目根目录下,执行npm run build,生成dist文件夹

    复制dist中的static、index.html到服务器相应位置(自定义)

    本文为:/home/xxx/vue_demo

    2、nginx下载安装过程:

    登陆nginx.org网站,点击右侧download,下载开源稳定版本的nginx,本人下载为nginx-1.16.1

    复制地址链接,在root下创建相应的文件夹,如:nginx

    进入nginx下,执行命令,wget http://nginx.org/download/nginx-1.16.1.tar.gz

    执行命令,tar -xvf nginx-1.16.1.tar.gz ,解压文件,生成nginx-1.16.1

    进入nginx-1.16.1下,执行命令./configure --help | more,查看安装nginx可用的参数列表,在此,本人选择--prefix参数定义,nginx的安装位置

    执行命令./configure --prefix=/home/xxx/nginx

    注意,此时,仍未出现/home/xxx/nginx文件夹

    执行命令make,进行编译

    执行命令make install,进行安装

    转换到/home/xxx/nginx,查看有以下文件夹存在:

    client_body_temp  conf  fastcgi_temp  html  logs  proxy_temp  sbin  scgi_temp  uwsgi_temp

    至此,nginx安装完毕。(此种方式,为编译安装,支持按需扩展)

    3、配置VUE项目,进行访问

    打开nginx下的conf,复制nginx.conf

    命令cp nginx.conf nginx_vue.conf

    命令vim nginx_vue.conf

    修改server模块下部分参数:

    #监听端口,浏览器访问使用

    listen 8080;

    #服务器地址(域名、IP)

    server_name localhost;

    #charset koi8-r;

    #进程运行日志的存储地址

    #access_log logs/host.access.log main;

    #资源访问配置(location后的表达式,支持正则)

    location / {

    # 项目所在位置

    root /home/xxx/vue_demo;

    #前端起始页位置,支持多个(如下)

    index index.html index.htm;

    }

    保存退出

    4、nginx的相关命令

    nginx文件夹下:

    启动:./sbin/nginx

    根据配置文件启动:./sbin/nginx -c nginx_vue.conf(默认为nginx.conf)

    停止:./sbin/nginx -s stop

    退出:./sbin/nginx -s quit(优雅的停止)

    重启:./sbin/nginx -s reopen

    重新加载配置文件:./sbin/nginx -s reload

    查看帮助:./sbin/nginx -s -h

    开启服务器8080端口,支持外网访问。浏览器访问ip:port,至此结束!

    展开全文
  • vue项目打包

    2019-01-03 16:57:50
    vue项目打包  打包命令:npm run build  执行完之后我们的vue项目目录下会生成一个dist文件,里面存放一个index.html和一个static文件夹,这个文件夹中主要是用来存放我们的css,images,js等文件,然后我们...
  • vue项目中使用npm run build打包后会生成一个dist文件,使用git推送项目后,发现git上少了一个dist文件,什么明明本地项目中有这个文件而推上去就没有了呢? 这里会先介绍.gitignore,不想看的 请直接跳过介绍 看...
  • vue项目打包dist文件 代码 from flask import Flask from flask import render_template #引入模板插件 app = Flask(__name__, static_folder='./dist/static', #设置静态文件夹目录 template_folder = "./dist") ...
  • vue项目中使用npm run build打包后会生成一个dist文件,使用git推送项目后,发现git上少了一个dist文件,什么明明本地项目中有这个文件而推上去就没有了呢?这里会先介绍.gitignore,不想看的 请直接跳过介绍 看...
  • webpack打包vue项目之后dist文件夹在本地跑起来 转载:https://blog.csdn.net/u014054437/article/details/79981307 谢谢博主 亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行。 我...
  • vue项目打包上线

    2019-03-21 09:54:40
    vue项目开发完毕后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目。(以下以vue-cli脚手架生成的项目例) 发布服务器 1、运行打包命令 npm run build 复制代码运行后生成dist文件夹,将dist...
  • 打包之后生成一个名为dist的文件夹,里面是打包后的项目文件和资源。但是,打开index.html文件后却显示一片空白 原因分析: config文件夹下index.js里面关于build的配置,有一个属性assetsPublicPath,默认是 '/'...
  • vue项目中使用npm run build打包后会生成一个dist文件,使用git推送项目后,发现git上少了一个dist文件,什么明明本地项目中有这个文件而推上去就没有了呢?这里会先介绍.gitignore,不想看的 请直接跳过介绍 看...
  •  默认情况下,当我们执行 npm run build 命令打包完一个项目后,会得到一个dist目录,里面有一个js目录,存放了该项目编译后的所有js文件。  我们发现每个js文件都有一个相应的 .map 文件,它们仅是用来调试代码的...
  • 由于vue-cli3之后不需要手动配置webpack.config.js文件,因此可以这样进行vue项目打包 如你生成的dist文件下的index.html空白文件,即vue.config.js中的publicpath:’/'和上图中的不一样,修改一样后即可解决此...
  • 发现有人问到vue项目打包dist文件夹怎么部署?所以,就有了这篇文章,也是对之前写的文章做一个补充吧! 1.要下载nginx,然后解压。这里已windows版本例,.zip后缀的才是windows版本。下载地址 解压后,运行cmd...
  • vue项目打包后默认是绝对路径项目的根目录下,将绝对路径改相对路径:config/index.js // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__...
  • Vue项目打包成安卓APP

    千次阅读 2020-04-03 10:37:37
    概述:普通vue项目如何成安卓apk...第二步:通过npm run build 指令打包vue项目dist文件夹里面 第三步:通过HBuilderX工具5+App的默认模板项目 第四步:把除了manifest.json以外的所有东西删除 第五步:把vue打...
  • vue项目开发完毕后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目。(以下以vue-cli脚手架生成的项目例) 发布服务器 1、运行打包命令 npm run build 运行后生成dist文件夹,将dist文件夹...
  • vue项目打包成移动端app

    万次阅读 热门讨论 2018-04-17 20:59:50
    事先准备,开发完成的web app项目(也可以利用vue-cli脚手架构建vue模板项目),npm run dev可以正常预览的项目   1,将项目目录下config文件内index.js中assetsPublicPath修改 assetsPublicPath: './' 2,...
  • 将完成的Vue项目打包 (build)后的dist文件放入编译器,在HBuilder中直接右键选择转换移动App即可,在HBuilder X中要先新建一个5+App项目 在新建的test项目中,除了App配置文件manifest.json,其他文件可以全都...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 475
精华内容 190
关键字:

vue项目打包为dist

vue 订阅