vue打包访问的第二种方法实现

http://t.zoukankan.com/yeduweichengzhaoyu-p-13043110.html

 

 

方法一

打包vue项目出来 dist包

cd到dist包下

执行 http-server  即可

加属性-p可以指定端口

例子: http-server -p 11911

https://blog.csdn.net/shrimp6/article/details/125404103   (更多属性可参考这个)

 

 

方法二

在项目主目录下添加server.js文件

记得要npm install express  安装 express库

var path = require('path')
var express = require('express');   //记得要npm install express  安装 express库
var app = express();
const PORT = 11911;  //指定端口

app.use(express.static(path.join(__dirname, './dist/'), {  //指定打包文件
  etag: true,
  lastModified: true,
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      res.set('Cache-Control', 'no-cache');
    }
  },
}));

app.use(function (req, res) {
  res.set('Cache-Control', 'no-cache');
  res.sendFile(path.join(__dirname, './dist/'));
})

app.listen(PORT, function () {
  console.log('The app server is working at ' + PORT)
})

 修改下package.json

"name": "vue3-1",
  "private": true,
  "version": "0.0.0",
  "type": "commonjs",  //改了这里   
  "scripts": {
    "dev": "vite --port 11911",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "production": "node ./server.js"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "express": "^4.18.2",
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "typescript": "^4.6.4",
    "vite": "^3.1.0",
    "vue-tsc": "^0.40.4"
  }
}

 

在项目主目录下终端运行

node ./server.js

 

这里有个小聪明

找到 package.json文件

"scripts": {
    "dev": "vite --port 11911",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "production": "node ./server.js"     加上这个句//
  },


那么就可以 npm run production 也就执行node ./server.js的命令了