“vue.config.js”文件在哪里？

Question

我剛剛開始學習 Vue，但我根本無法為我的容器設置環境。 我使用 Cloud9，我必須根據此鏈接分配我的主機以服務 Vue 應用程序。

不幸的是，我找不到vue.config.js文件來執行此操作。

Vue 文檔中也沒有路徑指示。

"if it's present in your project root..."但如果沒有呢？ 無論如何，去使用 React？ :)

Vue版本：3.1.1

Answer 1

請參閱Vue CLI 的文檔：

vue.config.js是一個可選配置文件，如果它存在於您的項目根目錄中（在package.json旁邊），它將由@vue/cli-service自動加載。 您也可以使用package.json中的 vue 字段，但請注意，在這種情況下，您將僅限於 JSON 兼容的值。

該文件應導出包含選項的對象：

 // vue.config.js module.exports = { // options... }

所以只需自己創建文件。 它是完全可選的。

Answer 2

很簡單，只需在項目的 ROOT 文件夾中創建文件vue.config.js 。

它非常重要的文件。 它位於 vue 項目之上。 人們通常在舊式風格中使用不止一頁。 vue.config.js 是定義主要依賴頁面的正確位置。

我曾經創建主單頁應用程序（pwa），但我還需要一些其他頁面。 例如錯誤頁面或谷歌驗證。

您可以更改開發服務器端口、sourceMap 啟用/禁用或 PWA 配置...

module.exports = {
  pages: {
    'index': {
      entry: './src/main.ts',
      template: 'public/index.html',
      title: 'Welcome to my vue generator project',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    'bad': {
      entry: './src/error-instance.ts',
      template: 'public/bad.html',
      title: 'Error page',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    /* Disabled - Only one time
    'googleVerify': {
      entry: './src/error-instance.ts',
      template: 'public/somelink.html',
      title: 'Error page',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    */

  },
  devServer: {
    'port': 3000
  },
  css: {
    sourceMap: false
  },
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
  },
}

對於此配置，這里是主實例文件：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App, {
     props: { error: 'You can not search for assets...' }
  }),
}).$mount('#error')

Answer 3

如果你使用了 vue-cli，這在你的根目錄中是這樣的

• 你的項目
  • 節點模塊
  • 上市
  • 源代碼
  • ...
  • vue.config.js

如果你沒有它，你的項目不是 vue-cli，它是 vit-vue，你的配置文件名是 vit.config。 Vue