如何本地运行vue dist文件

目录
  • 本地运行vue dist文件
    • 静态资源路径问题——空白页面
    • dist文件在本地运行
  • 运行dist打包文件：简单得很!!!

本地运行vue dist文件

vue打包命令 npm run build

运行这个命令会在目录中生成一个dist文件夹

在服务器部署vue项目只需要把这个文件夹给后台就可以了

但是打包之后我们需要在本地先自测一下，下面就是踩过的一些坑：

静态资源路径问题——空白页面

解决方法：

1.打开脚手架的config文件中的index.js文件，

把build对象内的assetsPublicPath(发布路径)改为"./"。

默认的情况下是"/"，但是"/“是绝对路径，而”./"是相对路径

dist文件在本地运行

因为dist文件是要有服务启动的，所以需要在本地启动服务

vue项目通过webpack打包生成的dist文件放到express环境里运行（vue+webpack+express）

解决方案：

1.安装express本地服务器

npm install -g express-generator

安装完毕之后可以通过 express --version验证express是否安装成功

2.创建本地服务器

在某个盘符下运行

express myProject

其中，myProject为最终服务器文件夹名称，可自定义。

本地项目生成以后进入项目，cd myProject

进入项目之后使用 npm i 安装依赖

到此，本地服务创建完成

3.运行vue打包项目

将vue打包生成的dist目录下的文件复制粘贴到上图public目录下（如图所示）：

然后运行

npm start

打开浏览器，输入http://localhost:3000，即可看到项目在上线后的效果了。

运行dist打包文件：简单得很!!!

项目打包完成后，会生成 dist 文件夹，如何检验 dist 文件夹呢？

1. 一般打包完成后会在项目根目录生成一个 dist 文件夹，此时，我们在项目根目录新建一个 js 文件（我以 server.js 为例）

server.js 中代码如下：

const express = require('express')
const app = express()
const port = 8012 // 自定义端口号（不要与已存在端口冲突）
app.use(express.static('dist')) // dist 是项目的打包资源路径
app.listen(port, () => console.log(`服务器 ${port} 开启成功!`))

注：要改动的就注释的两处：

  • port 不要与已存在端口冲突。
  • 若打包文件夹 dist 在项目根目录，直接 app.use(express.static('dist')) 就行了；
  • 若打包文件夹 dist 不在项目根目录，就自行调整，如：app.use(express.static('/sty/dist'))。

2. 在项目根目录下运行 node 命令启动 server.js 文件：

node server.js

成功就会提示服务器开启成功：

如果未开启服务器成功，很可能是因为你没装 express，此时运行 npm i express 安装下即可

3. 到此，只要在浏览器输入：http://localhost:8012 即可预览 dist 文件夹的打包

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 打包后找不到dist文件夹的解决方案

    vue 打包后找不到dist文件夹的解决方案

    目录 打包后找不到dist文件夹 运行vue打包后的dist文件夹下的项目 需要安装http-server 通过命令行进入到dist文件夹 打包后找不到dist文件夹 接受一个别人做了一半的项目  , 结果要打包测试的时候  执行npm run build 后 没有dist 文件 看了一下 config文件夹里面的index.js 文件 的build对象, 原来是默认的打包路劲被修改了 , 修改回来就好了, __dirname是获取当前位置的绝对路径 运行vue打包后的dist文件夹下的项目 需

  • vue项目中使用rimraf dev启动时删除dist目录方式

    vue项目中使用rimraf dev启动时删除dist目录方式

    目录 使用rimraf dev启动时删除dist目录 vue修改dist目录 使用rimraf dev启动时删除dist目录 适用 vue 2.x vue 3.x已经会在启动时自动删除dist目录 webpack.dev.conf.js 'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge =

  • vue-cli3.0.4中webpack的dist路径如何修改

    vue-cli3.0.4中webpack的dist路径如何修改

    目录 webpack的dist路径修改方式 webpack配置路径问题 webpack的dist路径修改方式 修改的文件在 node_modules\@vue\cli-service\lib\options.js 如图,baseUrl最后一个路径名字要和outputDir的名字相同 修改后的路径结果 另外assetsDir如果有值,那么会把js,css,img之类的静态资源放到该值对应的文件夹里去 填了值 webpack配置路径问题 一般写vue项目,结合vue-cli,webpack使用. 必

  • 详解Vue项目的打包方式(生成dist文件)

    详解Vue项目的打包方式(生成dist文件)

    目录 一.相关配置 情况一(使用的工具是 vue-cil) 情况二(使用的工具是 webpack) 二.打包 一.相关配置 情况一(使用的工具是 vue-cil) 如果是用 vue-cli 创建的项目,则项目目录中没有 config 文件夹,所以我们需要自建一个配置文件:在根目录 src 下创建文件 vue.config.js,需注意文件名称必须是 vue.config.js,然后在文件中插入以下代码: //打包配置文件 module.exports = { assetsDir: 'static

  • 使用vue-cli3打包dist路径问题修改打包配置

    目录 在vue.config.js目录下配置 vue-cli3打包注意路径的问题 在vue.config.js目录下配置 module.exports = { /** 区分打包环境与开发环境 * process.env.NODE_ENV==='production' (打包环境) * process.env.NODE_ENV==='development' (开发环境) * baseUrl: process.env.NODE_ENV==='production'?"https://cdn.did

  • 如何本地运行vue dist文件

    如何本地运行vue dist文件

    目录 本地运行vue dist文件 静态资源路径问题——空白页面 dist文件在本地运行 运行dist打包文件:简单得很!!! 本地运行vue dist文件 vue打包命令 npm run build 运行这个命令会在目录中生成一个dist文件夹 在服务器部署vue项目只需要把这个文件夹给后台就可以了 但是打包之后我们需要在本地先自测一下,下面就是踩过的一些坑: 静态资源路径问题——空白页面 解决方法: 1.打开脚手架的config文件中的index.js文件, 把build对象内的assets

  • vue项目打包之后在本地运行的实现方法

    vue项目打包之后在本地运行的实现方法

    目录 vue项目打包后在本地运行 项目打包后无法运行的问题 vue项目打包后在本地运行 vue打包之后如果直接启动index.html文件的话就会出现报错 Refused to apply style from 'http://127.0.0.1:5500/css/main.6df880bd.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME check

  • vue本地打开build后生成的dist文件夹index.html问题

    1.问题描述: npm run build 在dist 文件生成了 index 和 static 文件夹,为什么本地打开不了,给后端就能打开? 如何才能像访问 npm run dev 的地址那样访问? 2.种简单方法 2.1 修改配置在本地访问 更改一些路径参数后,然后再次运行npm run build 就可以在本地打开index.html 改哪里? config/index.js文件 build: { assetsPublicPath: '/' } 改成 build: { assetsPubl

  • vue-cli打包后本地运行dist文件中的index.html操作

    使用npm run build生成dist文件夹中的文件是你需要上传到服务器上的文件, 直接打开index.html会直接报错 可以尝试用express搭建一个服务器,做法如下: 1.在dist根目录下新建server.js文件: 2.代码如下: var express = require('express'); var app = express(); const hostname = 'localhost'; const port = 3000; app.use(express.static

  • 详解webpack打包vue项目之后生成的dist文件该怎么启动运行

    亲测,webpack打包vue项目之后生成的dist文件可以部署到 express 服务器上运行. 我的vue项目结构如下: 1. 进入该vue项目目录,打开git bash,执行:npm run build(在package.json的scripts配置) 执行成功如下图所示: 然后此时你会发现项目下多了一个 dist 文件夹,dist下文件便是项目打包之后生成的文件. 此时我们直接在浏览器中打开index.html,是会报错的,什么都看不到. 2. 安装express-generator生成

  • vue 查看dist文件里的结构(多种方式)

    场景:优化打包后的代码,提高性能. 1.方式一:report-json. 1.1 package.json文件里加入以下命令, "report": "vue-cli-service build --report-json" 1.2 然后控制台运行 npm run report 1.3 结果:会在dist文件夹里生成 report.json.里面有打包后每个文件的来源. 2.方式二:使用 stats-webpack-plugin 插件. 2.1  安装 npm ins

  • vue生成文件本地打开查看效果的实例

    问题描述: npm run build 后dist文件夹下面直接浏览器打开index.html,css和js的路径都不正确. 放到跟目录下就正常了. 问题解决: 打开项目所在文件夹里面的 config - index.js 在 build 部分的 assetsPublicPath 里面加一个点即可 assetsPublicPath: '/', 改为 assetsPublicPath: './', 解释: 将绝对路径改为相对路径(解释有点不对,凑合着理解吧) 延伸: 这么做的效果主要影响的是 项目

  • Vue如何下载本地静态资源static文件夹

    Vue如何下载本地静态资源static文件夹

    目录 下载本地静态资源static文件夹 下载静态文件方法 下载 下载本地static静态文件的踩坑 下载本地静态资源static文件夹 下载静态文件方法 <a href="/static/serviceAgreement.docx" rel="external nofollow" rel="external nofollow" download="下载"></a> 下载 项目需要下载本地的docx文档

随机推荐