Блог

Я написал приложение, используя webpack шаблон для vue . Серверная часть, обрабатывающая GET и POST запросы, является express сервером. IDE — это Visual studio code.

Это то, что я сделал:

 $ vue init webpack app
$ cd app
$ npm install
$ npm install axios express body-parser node-sass sass-loader
$ npm install --save-dev concurrently nodemon
  

app/express/app.js выглядит так:

 //import express from express
var express = require('express')
var app = express()
// sets port 8080 to default or unless otherwise specified in the environment
app.set('port', process.env.PORT || 8080)

var bodyParser = require('body-parser')    
app.use(bodyParser.json())

app.use(express.static(`${__dirname}/../dist/`))

// Test: curl -X POST -H "Content-Type: application/json" -d '{"path": "bla/blub.txt"}' http://localhost:8081/api/save
app.post('/api/save', function (req, res) {
    response = {
        msg: 'okay',
        data: Math.floor(Math.random() * 10)
    };
    res.end(JSON.stringify(response))
})

var server = app.listen(app.get('port'), function () {
    var host = server.address().address
    var port = server.address().port
    console.log("Example app listening at http://%s:%s", host, port)
})
  

Я изменил шаблонный код, сгенерированный с помощью, vue init webpack таким app/components/HelloWorld.vue образом, чтобы:

 <template>
    <div>
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
import Axios from 'axios'
const baseUrl = "http://127.0.0.1:8080/api"
export default {
    name: 'HelloWorld',
    data () {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    },
    async created() {
        this.msg = await Axios.post(`${baseUrl}/save`, {"path": "bla/blub.txt"})
            .then(response => new Promise(resolve => {
                let msg = response.data.msg
                resolve(msg)
            }))
            .catch(error => {
                console.log(error)
                Promise.reject(error)
            })
    }
}
</script>

<style lang="scss" scoped>
h1 {
  font-weight: normal;
}
</style>
  

Чтобы начать разработку одной командой ( npm start go ) и разрешить горячую перезагрузку, я изменил app/package.json (не знаю, откуда я это скопировал):

   "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "apiserver": "PORT=8081 nodemon express/app.js",
    "go": "concurrently --kill-others "npm run dev" "npm run apiserver"",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  

Чтобы запустить версию приложения для разработчиков, я запустил:

 $ npm run dev   # webpack-dev-server starts on port 8080, express on 8081
  

Чтобы избежать CORS-проблем, webpack можно настроить для прокси-экспресс-запросов. Измените app/config/index.js :

 proxyTable: {
'/api':{
    target: 'http://localhost:8081',
    changeOrigin: true,
 }
},
  

Теперь можно снова запускать npm run dev с app/ , все работает нормально.

Следовательно, переходите в рабочий режим. Я запускаю

 $ npm run build
$ node express/app.js
  

Все работает нормально.

(Со временем я добавил ответы, найденные мной самим, в этот вопрос… Первоначальный вопрос был: «Настройте webpack для интерфейса vue и серверной части express (сценарий как для производства, так и для разработки)»)

Теперь мой вопрос:

Как изменить настройку webpack babel таким образом, чтобы в node файле запуска app.js использовался ECMA2016 (который import express from express можно использовать вместо require ... )?

Спасибо за любую помощь!