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

Question

I've just started to learn Vue but I simply can't set up enviroment for my container. I use Cloud9 and I have to assign my host for serving Vue app according to this link .

Unfortunately, I can't find vue.config.js file to do this.

Also there is no path indication in Vue docs .

"if it's present in your project root..." but what if not? Whatever, go use React? :)

Vue version: 3.1.1

Answer 1

See the documentation of Vue CLI :

vue.config.js is an optional config file that will be automatically loaded by @vue/cli-service if it's present in your project root (next to package.json ). You can also use the vue field in package.json , but do note in that case you will be limited to JSON-compatible values only.

The file should export an object containing options:

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

So just create the file by yourself. It is completely optional.

Answer 2

It's simple just create file vue.config.js in ROOT folder of project.

Its very important file. it's on top of vue project. People usualy use more than one page in old fasion style. vue.config.js is right place to define main dependency pages.

I used to create main sigle-page app (pwa) but i also need some other pages. Like error pages or google verify for example.

You can change dev server port , sourceMap enable/disable or PWA configuration...

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',
  },
}

For this config here's main instance file:

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

if you used vue-cli this is in your root like this

• your project
  • node_module
  • public
  • src
  • ...
  • vue.config.js

if you dont have it, your project is not vue-cli, it is vit-vue , and your config file name is vit.config. vue