Vue+Node部署

用express初始化node

express -ejs rty-server生成

目录结构
├── 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
不需要删除 在默认路由下面添加下列代码

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

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


node路由访问成功
打包部署Vue

用vue-cli初始化项目

vue init webpack rty-vue
cnpm install 
npm run dev //本地启动vue
cnpm install axios --save-dev  
修改main.js初始化axios
import Axios from 'axios'
Vue.prototype.axios=Axios  //全局配置axios
Vue.prototype.axios.defaults.baseURL = 'http://xx.xx.xx';    //默认请求地址
修改HelloWorld.vue
注释掉原本的dom元素 | 也可以不注释
html


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)})
    }
  }
直接打包
npm run build

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

重启node

pm2 start ./bin/www

浏览器访问服务器地址
Vue+Node部署_第1张图片
访问成功、访问node接口成功

你可能感兴趣的:(Vue+Node部署)