本地测试vue-cli打包后的dist文件

此方法可以自己本地写接口，自己打包vue-cli，然后测试打包后的文件是否正确。

1.本地获取自己写到的node.js接口

可能会遇到跨域的问题，可以看我的博客跨域问题

1.1.在vue页面中引入自己node.js写的接口（关于node.js的教程可以看我以前的博客）

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import {AjaxUrl} from '../common/ajax/serverPublic';
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    };
  },
  methods: {
    get() {
      this.$ajax.get('http://127.0.0.1:3000/hcd').then((response) => {
        console.log(response);
      });
    }
  },
  created() {
    this.get();
  }
};
</script>

1.2.对应的node.js

var express = require("express");
var app = express();
// 设置响应的头部信息
const setHeader = (req, res, next) => {
  res.header('Access-Control-Allow-Credentials', 'true');
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, X-Powered-By, Accept,X-Requested-With, set-cookie");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By", ' 3.2.1')
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
}

// 接口
app.get("/hcd", function (req, res) {
  res.json({
    status: '1',
    msg: {
      name: 'hcd'
    }
  })
});

app.listen(3000);

将其跑起来
node node.js
我们看vue本地server运行起来的样子

2.测试dist文件

2.1 打包vue项目

npm run build

生成dist文件

2.2.将dist放在和node.js同目录下面

在node.js中引入静态文件dist文件夹

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

运行node.js

node node.js 

我们看node.js 运行起来后的地址 http://127.0.0.1:3000/#/