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

Question

我刚刚开始学习 Vue，但我根本无法为我的容器设置环境。 我使用 Cloud9，我必须根据 this link 分配我的主机来服务 Vue 应用程序。

很遗憾，我找不到vue.config.js 文件来执行此操作。

Vue docs 中也没有路径指示。

"if it's present in your project root..." 但如果不是呢？无论如何，去使用 React？ :)

Vue 版本：3.1.1

Answer 1

见documentation of Vue CLI：

vue.config.js 是一个可选配置文件，将自动 由@vue/cli-service 加载，如果它存在于您的项目根目录中（下一个 到package.json)。也可以使用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')