vue cli 4定義站點發布在子目錄下的兩則vue.config.js

官方指導:

https://cli.vuejs.org/zh/config/#baseurl

親測有用:

module.exports = {
  // 項目部署的基礎路徑
  // 我們默認假設你的應用將會部署在域名的根部,
  // 比如 https://www.my-app.com/
  // 如果你的應用時部署在一個子路徑下,那么你需要在這里
  // 指定子路徑。比如,如果你的應用部署在
  // https://www.foobar.com/my-app/
  // 那么將這個值改為 `/my-app/`
  baseUrl: '/Reader/dist/',  /*這個是我存放在github在線預覽的項目*/
 
  // 將構建好的文件輸出到哪里
  outputDir: 'dist',
 
  // 放置靜態資源的地方 (js/css/img/font/...)
  assetsDir: '',
 
  // 用于多頁配置,默認是 undefined
  pages: {
    index: {
      // 入口文件
      entry: 'src/main.js',  /*這個是根入口文件*/
      // 模板文件
      template: 'public/index.html',
      // 輸出文件
      filename: 'index.html',
      // 頁面title
      title: 'Index Page'
    },
    // 簡寫格式
    // 模板文件默認是 `public/subpage.html`
    // 如果不存在,就是 `public/index.html`.
    // 輸出文件默認是 `subpage.html`.
    subpage: 'src/main.js'    /*注意這個是*/
  },
 
  // 是否在保存的時候使用 `eslint-loader` 進行檢查。
  // 有效的值:`ture` | `false` | `"error"`
  // 當設置為 `"error"` 時,檢查出的錯誤會觸發編譯失敗。
  lintOnSave: true,
 
  // 使用帶有瀏覽器內編譯器的完整構建版本
  // 查閱 https://cn.vuejs.org/v2/guide/installation.html#運行時-編譯器-vs-只包含運行時
  runtimeCompiler: false,
 
  // babel-loader 默認會跳過 node_modules 依賴。
  // 通過這個選項可以顯式轉譯一個依賴。
  transpileDependencies: [/* string or regex */],
 
  // 是否為生產環境構建生成 source map?
  productionSourceMap: true,
 
  // 調整內部的 webpack 配置。
  // 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},
 
  // CSS 相關選項
  css: {
    // 將組件內的 CSS 提取到一個單獨的 CSS 文件 (只用在生產環境中)
    // 也可以是一個傳遞給 `extract-text-webpack-plugin` 的選項對象
    extract: true,
 
    // 是否開啟 CSS source map?
    sourceMap: false,
 
    // 為預處理器的 loader 傳遞自定義選項。比如傳遞給
    // sass-loader 時,使用 `{ sass: { ... } }`。
    loaderOptions: {},
 
    // 為所有的 CSS 及其預處理文件開啟 CSS Modules。
    // 這個選項不會影響 `*.vue` 文件。
    modules: false
  },
 
  // 在生產環境下為 Babel 和 TypeScript 使用 `thread-loader`
  // 在多核機器下會默認開啟。
  parallel: require('os').cpus().length > 1,
 
  // PWA 插件的選項。
  // 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
  pwa: {},
 
  // 配置 webpack-dev-server 行為。
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    // 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
    proxy: null, // string | Object
    before: app => {}
  },
 
  // 三方插件的選項
  pluginOptions: {
    // ...
  }
}

下面未測:

// 引用 npm ip包,用來獲取本地ip等操作,文檔地址:https://www.npmjs.com/package/ip
const ip = require('ip')
// 引用path包(path屬于node自帶包,無需在package.json中引用安裝即可直接引用),用來操作路徑,文檔地址:https://nodejs.org/docs/latest/api/path.html
const path = require('path')
// 引用 npm html-webpack-inline-plugin包,用來將html中inline標識的<script>,<link>,<img>標簽的元素內容壓縮進html中
const HtmlWebpackInlinePlugin = require('html-webpack-inline-plugin')
// 引用 npm filemanager-webpack-plugin包,用來操作文件,允許復制,歸檔成 (.zip/.tar/.tar.gz),移動,刪除文件和目錄在構建前或者構建前, 文檔地址:https://www.npmjs.com/package/filemanager-webpack-plugin
const FileManagerPlugin = require('filemanager-webpack-plugin')
// 判斷時候是生產環境
const isProd = process.env.NODE_ENV === 'production'
// 定義一些公用參數,以供項目中使用
const pluginOptions = {
  // 項目名,定義成我們在云平臺申請的應用名,類似 ***.vivo.com.cn
  projectName: 'huwd',
  // 本地ip
  host: ip.address(),
  // 定義端口
  port: 8080,
  // 登錄的地址,需要一個client_id
  loginPath: 'https://psport.deio.com.cn/v3/web/login/authorze?client_id={client_id}',
  // 埋點上報的地址
  stPath: 'https://st-demss.reso.com.cn',
  // CDN域名,在云平臺申請到的項目靜態資源域名
  cdnPath: '/'
}

// vue.config.js導出的配置項
module.exports = {
  pluginOptions,
  // 測試服務啟動時顯示的ip,端口,代理配置
  devServer: {
    // host: pluginOptions.host,
    port: pluginOptions.port,
    public: `${pluginOptions.host}:${pluginOptions.port}`,
    // 默認會自動打開瀏覽器
    open: true,
    disableHostCheck: true,
    proxy: {
      '/api': {
        target: 'http://172.225.182.155:8080/ssub/',
        // target: 'http://172.252.182.75:8088/ssub/',
        // target: 'http://scb.api.test.ves.xyz/',
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }
  },

木易楊@:
// 部署應用包時的基本 URL,生成環境使用的是公用參數中的cdnPath
  publicPath: isProd
    ? pluginOptions.cdnPath : '/',
  lintOnSave: true,
  // 是否生成sourcemap文件,生成環境不生成以加速生產環境構建
  productionSourceMap: !isProd,
  // 靜態資源文件的目錄
  assetsDir: 'static',
  // css是否開啟sourcemap,生成環境不生成
  css: {
    sourceMap: !isProd
  },
  configureWebpack: config => {
    config.optimization && (config.optimization.splitChunks.minSize = 10000)
    config.plugins.push(
      new HtmlWebpackInlinePlugin()
    )
    if (isProd) {
      config.plugins.push(
        // Webpack完成捆綁過程后要執行的命令:刪除dist目錄下ignore目錄,prod-md5-zip目錄
        new FileManagerPlugin({
          onEnd: [{
            delete: [              `./dist/ignore`,
              './prod-md5-zip'
            ]
          }]
        })
      )
    }
    // 單個asset靜態資源文件的大小最大為409600B==>400KB,超過400KB則會給出警告
    config.performance = {
      maxAssetSize: 1024 * 400
    }
  },
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        // 將系統配置信息注入到HtmlWebpackInlinePlugin
        Object.assign(args[0], pluginOptions)
        // 設置頁面標題的icon
        args[0].favicon = path.join(__dirname, './src/assets/aaa.ico')
        return args
      })
    config.plugin('define').tap(args => {
      args[0]['CONFIG'] = JSON.stringify(pluginOptions)
      return args
    })
  }
}
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Vue CLI 3 https://cli.vuejs.org/zh/guide/ Vue CLI 是一個基于 V...
    smalike閱讀 602評論 0 1
  • 一、介紹 Vue CLI 是一個基于 Vue.js 進行快速開發的完整系統。有三個組件: CLI:@vue/cli...
    zhyzhyzz閱讀 30,746評論 1 17
  • 姓名:李睿 公司:海南美蘭美購城實業有限公司 組別:第420期謙虛四組 【日精進打卡第81天】 【知~學習】 《六...
    木子灬睿睿閱讀 92評論 0 0
  • 我病很久了。我試圖不去想這些。于是我來到陌生的地方。只有這種方法能分辨,令人作嘔的到底是自己還是周遭。 這世界真美...
    吸煙至死閱讀 326評論 0 0
  • [現象]當一個人遭遇萬念俱灰的困境,甚至決心一走(死)了之的時候,居然又那么活了下來并兀自苦苦掙扎著要繼續活下去。...
    古藍云閱讀 206評論 0 2