如何在VUE中更改主文件夹

Question

我是Vue的新人.我只是创建了vue项目vue create my-project-name.

工作良好.

但是如何更改文件夹结构？换行src并public在client文件夹中？

app folders:
|-client
  |- src
  |- public
|- package.json

并仍然使用所有cli功能？

Answer 1

更改serve和build脚本package.json:

vue-cli-service serve到vue-cli-service serve client/src
vue-cli-service build到vue-cli-service build client/src

并devServer.contentBase在vue.config.js

const path = require('path');

module.exports = {
  devServer: {
    contentBase: path.join(__dirname, 'client/public')
  }
}

Answer 2

最近偶然发现这个问题并找到了解决方法。不幸的是，鲁斯兰的方法对我不起作用。

这是我的基本全栈文件夹结构。

为了让它工作，我添加了以下内容vue.config.js

const path = require('path')

module.exports = {
  pages: {
    index: {
      entry: 'client/src/main.js',
      template: 'client/public/index.html'
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'client/src')
      }
    }
  },
  chainWebpack: config => {
    config
      .plugin('copy')
      .use(require('copy-webpack-plugin'), [[{
        from: path.resolve(__dirname, 'client/public'),
        to: path.resolve(__dirname, 'dist'),
        toType: 'dir',
        ignore: ['.DS_Store']
      }]])
  }
}

这应该

• 设置正确的条目和模板文件。
• 恢复@别名功能。
• 将文件从public文件夹复制到dist文件夹。

资源

• https://cli.vuejs.org/config/#pages
• https://github.com/vuejs/vue-cli/blob/bc3e4af3c0532d32ad53602546c2a91187b36948/packages/%40vue/cli-service/lib/config/app.js#L295-L306