Vue Cli項目生產環境編譯

在完成網頁的開發之后，要將項目放入生產環境中

需要將開發完的項目做以下處理

1，在項目新建環境變量文件 env.development

 

 

 文件中加入環境變量

VUE_APP_API_URL=http://localhost:3000/admin/api  
//URL 以實際開發環境為准，實例為本地

2，添加環境變量 baseURL加入項目內:

將項目中的baseURL 用環境變量代替

const http = axios.create({
    baseURL:process.env.VUE_APP_API_URL || '/admin/api',
    //baseURL:'http://localhost:3000/admin/api'
})

3,在項目根目錄新建vue cli配置文件 vue.config.js

module.exports = {
    outputDir:__dirname+'/../server/public/admin',//項目npm run build 導出靜態文件的地址
    publicPath: process.env.NODE_ENV === 'production'//設置項目publicPath
      ? '/admin/'
      : '/'
  }

4.控制台執行npm run build

在node.js server中將項目文件目錄加入到靜態文件托管

app.use('/admin',express.static(__dirname+'/public/admin'))

便可以在生產環境中訪問項目了

更多資料可以參考VUE CLI 配置參考 https://cli.vuejs.org/zh/config/#publicpath