VUE打包的项目在本地运行

最新推荐文章于 2024-06-23 14:48:36 发布

简_洋

最新推荐文章于 2024-06-23 14:48:36 发布

阅读量3.6k

点赞数 2

分类专栏：技术文档文章标签： vue node.js javascript vue.js

本文链接：https://blog.csdn.net/Even_ycp/article/details/103994522

版权

这个是基于nodeJs搭建的一个简易的服务器。所以电脑上要有Node环境和npm环境。
git地址是：https://github.com/ChappellYang/vue-
clone下来后npm i 一下就好了。

项目结构也很简单，代码就几句。关键是不用在vue.config.js里面配置打包的路径。我自己用的挺好。就记录下来，以防丢失！
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200115185258154.png?x-oss-proc
我把我的打包好dist文件夹的文件结构也发一下
dist文件目录

dist是vue打包好的文件夹。要用的话就创建一个文件夹，初始化，我把package.json、package-lock.json的代码贴出来。你们复制到你们的json文件里面。然后打开命令行直接npm install 下载依赖就好了。
代码贴在下面了。主要是太长了。
等依赖下载完了，就可以打开简易服务器了。前提你已经下载了node，支持npm
在你测试的文件夹打开powershell或者cmd、运行app.js
在这里插入图片描述
在命令行内输入 node ./app.js 敲回车，就打开了简易服务器。

可以看到下面提示运行在 http://127.0.0.1:8800下了。打开你的浏览器输入这个地址。就可以预览了。！

如果运行不了把app.js里面的“./dist” 改成你打包好的文件名称！

app.js

const express = require("express");
const app = express();

app.use(express.static("./dist"));

app.listen(8800, () => {
   
  console.log("server running at http://127.0.0.1:8800");
});

package.json

{
   
  "name": "testProject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   
    "express": "^4.17.1"
  }
}

package-lock.json

{
   
  "name": "testProject",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
   
    "accepts": {
   
      "version": "1.3.7",
      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
      "requires": {
   
        "mime-types": "~2.1.24",
        "negotiator": "0.6.2"
      }
    },
    "array-flatten": {
   
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
    },
    "body-parser": {
   
      "version": "1.19.0",
      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
      "requires": {
   
        "bytes": "3.1.0",
        "content-type": "~1.0.4",
        "debug": "2.6.9",
        "depd": "~1.1.2",
        "http-errors": "1.7.2",
        "iconv-lite": "0.4.24",
        "on-finished": "~2.3.0",
        "qs": "6.7.0",
        "raw-body": "2.4.0",
        "type-is": "~1.6.17"
      }
    },
    "bytes": {
   
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
    },
    "content-disposition": {
   
      "version": "0.5.3",
      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
      "requires": {
   
        "safe-buffer": "5.1.2"
      }
    },
    "conte