Vue+Node部署

用express初始化node

express -ejs rty-server生成

代码语言：javascript复制

目录结构
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade

修改文件index.js

代码语言：javascript复制

不需要删除 在默认路由下面添加下列代码

router.get('/giveSomeJson', function(req, res, next) {
  res.json({
        'title':'jsonObj',
        'time':Date.parse(new Date())
        })
});

重启node，访问服务器地址查看

node路由访问成功

打包部署Vue

用vue-cli初始化项目

代码语言：javascript复制

vue init webpack rty-vue
cnpm install 
npm run dev //本地启动vue
cnpm install axios --save-dev  

修改main.js初始化axios

代码语言：javascript复制

import Axios from 'axios'
Vue.prototype.axios=Axios  //全局配置axios
Vue.prototype.axios.defaults.baseURL = 'http://xx.xx.xx';    //默认请求地址

修改HelloWorld.vue

代码语言：javascript复制

注释掉原本的dom元素 | 也可以不注释
html
<button @click="getPhpData">getData</button>
<input v-model="dataFromNode" type="" name="">
js
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      dataFromNode:'empty'
    }
  },
  methods:{
    getPhpData:function(){
      this.axios.get('/giveSomeJson').then(res=>{
        console.log(res)
      }).catch(err=>{console.log(err)})
    }
  }

直接打包

代码语言：javascript复制

npm run build

把生成的dist文件中的index.html改名为index.ejs放进服务器上node项目view目录（覆盖） 把static文件放进public目录

重启node

pm2 start ./bin/www

浏览器访问服务器地址

访问成功、访问node接口成功

express json java

0 人点赞