摘要：這里提供手動(dòng)搭建單頁面開發(fā)生產(chǎn)環(huán)境，并使用寫后臺(tái)代碼，僅供小白參考代碼雖然沒多少，但牽扯的知識(shí)很多，需要逐個(gè)研究后續(xù)內(nèi)容手動(dòng)搭建單頁面二項(xiàng)目地址內(nèi)容提要，這一章會(huì)從到開發(fā)環(huán)境，生產(chǎn)環(huán)境的搭建思路先實(shí)現(xiàn)單頁面的然后實(shí)現(xiàn)服務(wù)下的開發(fā)環(huán)境再實(shí)

這里提供手動(dòng)搭建vue單頁面開發(fā)生產(chǎn)環(huán)境，并使用node寫后臺(tái)代碼，僅供小白參考；
代碼雖然沒多少，但牽扯的知識(shí)很多，需要逐個(gè)研究；

后續(xù)內(nèi)容《手動(dòng)搭建vue+node單頁面（二）》
https://segmentfault.com/a/11...

項(xiàng)目地址：https://github.com/liubingyan...

內(nèi)容提要：vue2,webpack,express,router,jsonp，這一章會(huì)從0到開發(fā)環(huán)境，生產(chǎn)環(huán)境的搭建：

思路：
先實(shí)現(xiàn)webpack單頁面的demo
->
然后實(shí)現(xiàn)express服務(wù)下的開發(fā)環(huán)境
->
再實(shí)現(xiàn)開發(fā)·生產(chǎn)環(huán)境的切換
->
最后做業(yè)務(wù)相關(guān)的頁面和后端開發(fā)

一、創(chuàng)建項(xiàng)目：

1.初始化項(xiàng)目:在桌面新建文件夾test,在test目錄下命令行輸入npm init -y;
2.test下創(chuàng)建src文件夾（前端所有代碼）；
build文件夾(打包相關(guān)的webpack配置文件)；
service文件夾(存放后端代碼)；
data文件夾(存放json數(shù)據(jù))；
server.js(node服務(wù))

二、下面我們先做單頁面,先不管服務(wù)的事情

在src目錄中創(chuàng)建views(存放所有.vue組件)，router(存放前端路由配置),store(存放vuex配置),man.js(單頁面入口文件),app.vue（單頁面首頁組件）,test下創(chuàng)建index.html作為載體。

接下來要做幾件事完成單頁面demo：
（1）編寫入口文件main.js

//main.js
const Vue from "vue"
const App from "./app"

new Vue({
  el:"#app",
  render:h=>h(App)
})

（2）單頁面主體app.vue;

//app.vue

(3)接下來是配置文件：在build文件夾中創(chuàng)建webpack.config.js

//webpack.config.js
const path = require("path")
module.exports = {
mode:"development",//webpack4新加的，不寫會(huì)報(bào)黃
entry: {
    main: path.resolve(__dirname, "../src/main.js")
},
output: {
    path: path.resolve(__dirname, "../dist"),
    publicPath: "http://localhost:3000/",
    filename: "[name].js"
},
module: {
    rules: [{
        test: /.vue$/,
        loader: "vue-loader",
        options: {
            loaders: {
                "less": [
                    "vue-style-loader",
                    "css-loader",
                    "less-loader"
                ]
            }
        }
    }, 
    {
    test: /.js$/,
    loader: "babel-loader",
    exclude: /node_modules/
  },]
},
resolve: {
alias: {//開發(fā)環(huán)境使用vue.esm.js",官網(wǎng)有說明
        "vue$": "vue/dist/vue.esm.js"
    },
    //reuqire加載文件會(huì)自動(dòng)為以下后綴的文件（如：./app.vue可以寫成./app了）
    extensions: ["*", ".js", ".vue", ".json"]
  },
}

接下來就是要啟動(dòng)項(xiàng)目了，不過要先安裝各種插件

vue
vue-loader
webpack
css-laoder
sass-loader
vue-style-loader
babel-loader
````

不全，缺什么根據(jù)提示慢慢裝

應(yīng)為最終我們啟動(dòng)項(xiàng)目是用server.js啟動(dòng)，所以在這里我們這樣寫

//server.js
const webpack=require("webpack")
const webpackConfig=require("./build/webpack.config")

webpack(webpackConfig,function(err,stats){
if(err) throw err
//輸出打包信息（不用在意這些細(xì)節(jié)）
 process.stdout.write(stats.toString({
     colors: true,
     modules: false,
     children: false,
     chunks: false,
     chunkModules: false
 }) + "

")
})

然后執(zhí)行打包(在test目錄下)

node server

爆紅就好好看看是語法錯(cuò)誤還是少插件，一會(huì)兒就能解決。

看下效果，忘記，index.html要先寫成：

//index.html



    
    


    

打開index.html看看效果。

三、開始實(shí)現(xiàn)express啟服和熱加載

接下來用express啟服，同時(shí)實(shí)現(xiàn)webpack的熱加載和server.js的熱加載；

1.修改配置server.js

//server.js
const webpack=require("webpack")
const webpackConfig=require("./build/webpack.config")
//dev和hot用來實(shí)現(xiàn)前端的熱加載
const webpackDevMiddleware = require("webpack-dev-middleware")
const webpackHotMiddleware = require("webpack-hot-middleware")
const express=require("express")
const path=require("path")

const app=express()

const compiler = webpack(webpackConfig)//刪除了打印的回調(diào)函數(shù)，加上的話這里會(huì)執(zhí)行兩遍打包，不曉得為啥

app.use(webpackDevMiddleware(compiler,{
    // public path should be the same with webpack config
    //在項(xiàng)目中這樣的路徑都會(huì)配置到統(tǒng)一的文件中
    publicPath: "http://localhost:3000/",
    noInfo: true,
    stats: {
        colors: true
    }
}))

app.use(webpackHotMiddleware(compiler))

app.listen(3000,function(){
    console.log("App  is now running on port 3000!");
})

2.修改兩個(gè)地方：webpack配置和index.html

   // webpack.config.js
const path = require("path")
const webpack=require("webpack")
const htmlPlugin=require("html-webpack-plugin")
//增加頁面熱加載字段，添加到entry中（固定寫法）
const hotMiddlewareScript = "webpack-hot-middleware/client?reload=true"

module.exports = {
    mode: "development",
    entry: {
    //就是這樣寫就對(duì) 了
            main: [path.resolve(__dirname, "../src/main.js"),hotMiddlewareScript]
        },
    output: {
        path: path.resolve(__dirname, "../dist"),
        publicPath: "http://localhost:3000/",
        filename: "[name].js"
    },
    module: {
        rules: [{
            test: /.vue$/,
            loader: "vue-loader",
            options: {
                loaders: {
                    "scss": [
                        "vue-style-loader",
                        "css-loader",
                        "less-loader"
                    ]
                }
            }
        }, {
            test: /.js$/,
            loader: "babel-loader",
            exclude: /node_modules/
        }, ]
    },
    resolve: {
        alias: {
            "vue$": "vue/dist/vue.esm.js"
        },
        extensions: ["*", ".js", ".vue", ".json"]
    },
    //新增html插件，生成main.js的同時(shí)生成index.html
    plugins:[
        new htmlPlugin({
            template:"index.html"
        }),
        //熱加載需要使用這個(gè)插件才起作用
        new webpack.HotModuleReplacementPlugin(),
    ]
}                

然后index.html改動(dòng)就是刪除自己寫的script標(biāo)簽就好。

3.啟動(dòng)項(xiàng)目之前全局安裝一個(gè)插件：(前端有了熱加載，這個(gè)是為了后端的熱加載，修改服務(wù)或者打包配置文件不用手動(dòng)重啟服務(wù)。)

 npm i supervisor -g
 

然后修改package.json中的scripts

//package.json
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
 //這句話是說：監(jiān)控（-w）后定義的文件或者文件夾 -e表示-w監(jiān)控的文件夾中的js文件發(fā)生變化時(shí)重啟server.js
"start": "supervisor -w server,build,server.js -e js server"

},

4.接下來激動(dòng)人心的時(shí)刻，啟動(dòng)：

npm run start

打開localhost:3000

按下f12看看有沒有報(bào)錯(cuò)，當(dāng)當(dāng)當(dāng)當(dāng)，沒有報(bào)錯(cuò)，現(xiàn)在已經(jīng)完成了一個(gè)簡(jiǎn)單但功能完善的開發(fā)環(huán)境；

四、署下生產(chǎn)環(huán)境

部署生產(chǎn)環(huán)境我們要做幾件事：
1.build新建config.js，配置一些通用設(shè)置；
2.build新建webpack.config.dev.js，區(qū)分開發(fā)模式和生產(chǎn)模式的配置，其實(shí)可以寫在一個(gè)文件中，弊端就是代碼太長(zhǎng)，而且開發(fā)模式require()的組件比較多，生產(chǎn)模式?jīng)]必要加載，所以分開；
3.修改server.js，webpack.js和package.json文件;

我們先修改package.json

//通過設(shè)置node環(huán)境中process.ENV屬性，來告訴webpack和server應(yīng)該運(yùn)行在哪個(gè)環(huán)境，cross-env NODE_ENV就是用來設(shè)置process.ENV的；
//package.json
"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "supervisor -w server,build,server.js -e js,html server",
    "dev": "cross-env NODE_ENV=development supervisor -w server,build,server.js -e js,html server",
    "pro": "cross-env NODE_ENV=production node server"
},

cross-env需要安裝下

npm i cross-env -save

再運(yùn)行開發(fā)環(huán)境就用npm run dev ,生產(chǎn)就用npm run pro

接下來在build文件夾下創(chuàng)建并配置config.js

//config.js
//簡(jiǎn)單配置夠用就好，完整的配置可以到vue全家桶中學(xué)習(xí)
const path=require("path")

let isdev=process.env.NODE_ENV=="development"?true:false

let config={
    isdev:isdev,
    publicPath:"http://localhost:3000/",
    port:"3000"
}

module.exports=config

在build下創(chuàng)建并編輯webpack.dev.config.js(把之前的webpack.config.js復(fù)制一下)

//webpack.config.dev.js(只展示不同的地方)
//....
//新增通用配置文件
const config = require("./config")
//....
output: {
    path: path.resolve(__dirname, "../dist"),
    publicPath: config.publicPath,//就是修改了輸出的公網(wǎng)路徑為配置文件中的路徑
    filename: "[name].js"
},
plugins: [
        new webpack.HotModuleReplacementPlugin(),
        //刪除html模板(后面會(huì)解釋)
        //new htmlPlugin({
        //        template:"index.html"
        //    }),
    ]
//....

接下來修改webpack.config.js為生產(chǎn)環(huán)境配置(同樣只列出不同的地方)

//webpack.config.js

const config = require("./config")
//刪除熱加載
//const hotMiddlewareScript = "webpack-hot-middleware/client?reload=true"
//新增文件清除插件
const cleanWebpackPlugin = require("clean-webpack-plugin")
    //....
    entry: {
        main:path.resolve(__dirname, "../src/main.js")//取消熱加載
    },
    output: {
        path: path.resolve(__dirname, "../dist"),
        publicPath: config.publicPath,
        filename: "[name].js"
    },
    //....
   resolve: {
        alias: {
            "vue$": "vue/dist/vue.min.js"http://生產(chǎn)使用壓縮的vue文件
        },
        extensions: ["*", ".js", ".vue", ".json"]
    },
    plugins: [
        //刪除熱加載
        //new webpack.HotModuleReplacementPlugin(),
        //刪除html模板（后面會(huì)解釋)
        //new htmlPlugin({
        //        template:"index.html"
        //    }),
        //增加dist刪除選項(xiàng)
        new cleanWebpackPlugin(["dist"], {
            "root": path.resolve(__dirname, "../"),
        })
    ]
    //....

最后修改server文件，覺得長(zhǎng)可以試著分成開發(fā)生產(chǎn)兩個(gè)文件

//server.js
const webpack = require("webpack")
const webpackConfig = require("./build/webpack.config")
const webpackDevConfig = require("./build/webpack.config.dev")
const webpackDevMiddleware = require("webpack-dev-middleware")
const webpackHotMiddleware = require("webpack-hot-middleware")
const express = require("express")
const path = require("path")
//新增config和swig插件
const config = require("./build/config")
const swig = require("swig")
const app = express()

//swig一款js模板引擎，是服務(wù)端向客戶端返回html的一種方式，swig只是眾多引擎中的一種；
//這里通過node向頁面返回html，而不是直接訪問dist中的index.html，所以到這里已經(jīng)把webpack中的html模板刪掉了；
//如果使用webpack使用html插件，在切換生產(chǎn)和開發(fā)需要手動(dòng)修改html的script;
app.engine("html", swig.renderFile);
app.set("view engine", "html");
app.set("views", path.resolve(__dirname, "./"));

app.get("/", function(req, res) {
    res.type("text/html");
    res.render("index");
});

if (config.isdev) {
    console.log("server運(yùn)行在開發(fā)環(huán)境")
    const compiler = webpack(webpackDevConfig)

    app.use(webpackDevMiddleware(compiler, {
        // public path should be the same with webpack config
        publicPath: "http://localhost:3000/",
        stats: {
            colors: true
        }
    }))


    app.use(webpackHotMiddleware(compiler))

} else {
    console.log("server運(yùn)行在生產(chǎn)環(huán)境")

    webpack(webpackConfig, function(err, stats) {
        if (err) throw err
        //輸出打包信息（這里又可以用了）
        process.stdout.write(stats.toString({
            colors: true,
            modules: false,
            children: false,
            chunks: false,
            chunkModules: false
        }) + "

")
        app.use(express.static(path.resolve(__dirname, "./dist")))

    })
}
app.listen(config.port, function() {
    console.log("App  is now running on port 3000!");
})

運(yùn)行之前先裝下swig插件，同時(shí)修改下index.html,手寫

//index.html

到目前為止的目錄結(jié)構(gòu)：

環(huán)境搭建完成了，業(yè)務(wù)代碼及后端邏輯下篇再講；
《手動(dòng)搭建vue+node單頁面（二）》
https://segmentfault.com/a/11...