使用express配置前端代碼服務器

咱們知道使用webpack打包vue項目後會生成一個dist文件夾，dist文件夾下有html文件和其餘css、js以及圖片等，那麼打包後的文件該如何正確運行呢？

　　假若直接打開html文件，會報以下錯誤：

　　那麼該如何運行呢？其實能夠將生成的dist文件部署到 express 服務器上運行。

　　（1）、安裝express-generator生成器。

　　　　 npm install express-generator -g // 也可以使用cnpm比較快 

　　

　　（2）、建立一個express項目。

　　　　 express expressName // expressName是項目名 

 

　　（3）、進入項目目錄，安裝相關項目依賴。

　　　　 cd expressName 

　　　　 npm install // 或cnpm install 

 

　　（4）、此時生成的項目目錄應該是這樣的：

　　　　　　

 

 

　　（5）、將dist文件夾下的全部文件複製到express項目的publick文件夾下面，而後運行  npm start 來啓動express項目。

 

　　（6）、打開瀏覽器，輸入localhost:3000就能夠看到效果了。

 

 

express配置多個vue項目

關鍵配置

vue： 在config/index.js文件中，以下配置

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/action/',
    //關鍵配置，資源目錄要擺在對應服務器上的目錄下，若是使用express，還須要配置一下路由
    //具體方法是在app.js裏面加上app.use('/h5/xxx/', express.static(__dirname+'/public/xxx'));  xxx=action
    //打包出來的項目放在express的public/action目錄下，文件存在請替換文件   
 /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

打開express根目錄的app.js文件，加上

app.use('/h5/xxx/', express.static(__dirname+'/public/xxx'))，而後

打包出來的webpack項目放在express的public/action目錄下，文件存在請替換文件 

 

本例子是在express中配置了一個/h5/action的網頁

能夠根據以上方法配置本身的網頁，能夠配置多個，目錄資源目錄統一在public中新建文件夾，而後vue打包的時候記得把資源文件指向這個目錄，添加新路由便可