“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