也许8-9个月前我用vue-cli创建了一个Webpacked Vue.js项目,并且能够修改/build/webpack.dev.conf.js它让index.html我在运行时将"已编译" 和JavaScript/CSS文件放在Flask应用程序的正确文件夹中npm run build.

我现在向其他人展示如何创建Vue.js/Flask应用程序,我发现vue-cli的工作方式似乎已经改变,因此我无法再访问该/build/文件夹.

我读的文档和他们似乎在说,现在抽象出的的WebPack配置(" 由于@ VUE/CLI-服务抽象掉的WebPack配置... "),但是,如果我想看到的WebPack的配置选项,我可以做vue inspect > output.js.我这样做了,并且在我八个月前做的时候没有看到我改变的条目:

/build/webpack.prod.conf.js:

new HtmlWebpackPlugin({
  filename: process.env.NODE_ENV === 'testing'
-    ? 'index.html'
+    ? 'app.html'
    : config.build.index,
-  template: 'index.html',
+  template: 'app.html',

/build/webpack.dev.conf.js:

new HtmlWebpackPlugin({
-   filename: 'index.html',
-   template: 'index.html',
+   filename: 'app.html',
+   template: 'app.html',

/config/index.js:

module.exports = {
  build: {
    env: require('./prod.env'),
-    index: path.resolve(__dirname, '../dist/index.html'),
-    assetsRoot: path.resolve(__dirname, '../dist'), …

注意：这是一个与我之前关于该主题的问题类似的问题，该问题部分未解决，之后挑战的性质发生了很大变化：如何使用 ESLint + Prettier + Airbnb 规则 + TypeScript + Vetur 配置 Vue CLI 4？

在 2019 年，我非常着迷于在 TypeScript 中使用Vue配置“圣杯”工具设置，并让VS Code 自动修复您的代码，保存在 .vue、.ts 和 .scss 文件中。

但要更漂亮与工作最佳ESLint和Vetur结束了太多的挑战。因为 Prettier 和 ESLint 的固有冲突具有部分相同的目标和类似的规则检查，并且 Vetur 为 VS Code 中的这种特定组合增加了更多复杂性。

此外，当设置大部分工作时，您需要连续多次保存文件是相当令人恼火的。因为一旦 ESLint 发现并修复了一组错误，就会出现新的错误，并且它不够先进，无法连续运行这些检查和修复，直到所有错误都被清除......

2019 年 11 月，我参加了多伦多 Vue Conf 会议，在 Evan 先生的研讨会 Deep Dive with Vue 3.0 中，我向他询问了这个问题。他说官方工具很快就会进行大修，新版本的 ESLint 将会有新功能......

他还暗示，在这一点上，几乎所有 Vue 官方样式指南的规则检查都写入了自动修复逻辑，结合即将推出的 Vue 3.0 完全模块化架构，甚至可能会看到官方 VS Code …

我正在使用Vue应用程序和CLI中的axios进行测试.我一直在使用vue-resource,我可以通过简单地将它传递给Vue.use(VueResource)来访问我的所有组件.我如何用axios实现这一点,所以我不必将它导入组件,而只需在main.js文件中定义一次？

我使用 vue-cli 创建了一个新站点。我正在使用开发服务器来提供页面。当我在浏览器中查看页面时，我看到浏览器控制台中显示两种类型的错误：

GET http://172.31.7.153:4000/sockjs-node/info?t=1555922702538 net::ERR_CONNECTION_TIMED_OUT
GET http://localhost:4000/sockjs-node/info?t=1555922708541 net::ERR_CONNECTION_REFUSED

我不确定它是什么意思，或者它是如何/为什么被调用的，它大约每 5 秒重复出现一次。

我有一个使用 Webpack 的 Vue.js 项目。我想为它添加 vue-cli 功能，这样我就可以像使用 vue-cli generate 项目一样使用它。但我不知道如何将 vue-cli 与现有项目集成。

对于新项目，我可以做，vue create <project-name但找不到将其与现有项目集成的说明。有官方的方法吗？（我想我可以创建新项目并将所有源移动到那里，但仍然可能有更好的方法来做到这一点）

postcss.config.js用于展示如何配置的变体数量非常令人困惑。有一些tailwindcss使用此功能的示例（例如文档中的示例）：

// Example 1:
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

然后是那些需要库的：

// Example 2:
module.exports = {
  plugins: {
    require('tailwindcss'),
    require('postcss-preset-env')({
      stage: 0,
      'nesting-rules': true
    })
  },
}

其他人在配置之前需要外部库module.exports：

// Example 3:

const tailwindcss = require('tailwindcss');
const postcssPresetEnv = require('postcss-preset-env');


module.exports = {
  plugins: {
    tailwindcss,
    postcssPresetEnv
  },
}

当必须合并未根据默认值命名的配置文件时，还有更多必要的内容。

yarn dev今天，当使用 postcss.config.js运行时，我收到此错误，如示例 2 所示：

Syntax Error: /[path]/_pod-test/postcss.config.js:3
    require('tailwindcss'),
             ^^^^^^^^^^^

SyntaxError: Unexpected string

当我删除带有“tailwindcss”的行时，“postcss-preset-env”也会发生同样的情况：

Syntax Error: /Volumes/_III_/Z_WWW/_ZZZ PoD/_pod-test/postcss.config.js:3
    require('postcss-preset-env')({ …

我发现vue-cli(2.9.6,但3.0.0 beta*有相同的问题)的构建过程需要一旦模板的html相对深入.

例如,我刚添加了一些预先包含的divs App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div><div><div><div></div></div></div></div>
    <HelloWorld/>
  </div>
</template>

这花了很长时间.

但一旦得到这个:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
    <HelloWorld/>
  </div>
</template>

然后建筑过程需要永远,我相信这个深度的巢并不是那么罕见.

我该如何处理这个问题？

编辑(详细内容)

似乎问题可能是特定于环境的,所以这里有详细信息.

至少可以使用这些环境重现此问题:

• Mac mini上的macOS High Sierra(2014年末)
• 戴尔XPS 13上的Ubuntu 18.04

和节点和npm版本是:

node --version
# prints
v8.9.4
# and
npm version
# prints
{ npm: '6.1.0',
  ares: '1.10.1-DEV',
  cldr: '31.0.1',
  http_parser: '2.7.0',
  icu: '59.1',
  modules: '57',
  nghttp2: '1.25.0',
  node: '8.9.4',
  openssl: '1.0.2n',
  tz: '2017b',
  unicode: '9.0',
  uv: '1.15.0',
  v8: '6.1.534.50',
  zlib: '1.2.11' …

当尝试在 Vue CLI 3 中加载自定义本地字体时，字体仍然不会出现。我没有收到任何错误消息。检查器显示正在加载的正确规则，但字体回落到serif#app。字体没有出现在我的 dist 文件夹中的任何地方。

我尝试在 vue.config.js 中添加加载器，更改 url 路径，并将 @font-face 规则移动到不同的位置，将公共路径更改为 ' ' 和 '/'，将 scss 导入 main.js。

字体加载：

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('/assets/fonts/OpenSans-Regular.eot');
    src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
         url('/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
         url('/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
         url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

并在 App.vue 中使用：

<style lang="scss">
#app {
  font-family: 'OpenSans-Regular', serif;
}
</style>

该样式放置在我的main.scss文件中。文件结构如下：

src
  assets
    fonts
      OpenSans-Regular.eot
      OpenSans-Regular.woff
      etc
  styles
    main.scss
  App.vue
vue.config.js

vue.config.js 文件如下：

module.exports = {
  publicPath: '/',
  css: { …

我正在使用VueCLI 2并构建为生产.build.js构建并编译为200KB.当我重新运行服务器作为开发时,它加载3MB.我确定dist文件夹中的build.js是200KB.我试图打开index.html但它不起作用并重定向到网站上的根目录.

的package.json

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},

的WebPack

module.exports = { ...
module:{
 ...
 plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    jQuery: 'jquery'
  })
 ],
 devtool: '#eval-source-map'
},
...
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
   new webpack.DefinePlugin({
    'process.env': {
     NODE_ENV: '"production"'
   }
  }),
  new webpack.optimize.UglifyJsPlugin({
    sourceMap: true,
    compress: {
     warnings: true
    }
  }),
  new webpack.LoaderOptionsPlugin({
    minimize: …

我无法弄清楚如何在Vue CLI项目中拥有多个页面.现在我的主页上有一些组件,我想创建另一个页面,但我不知道该怎么做.我应该创建多个html文件,默认情况下index.html是？在一个简单的文件结构中,css js img文件夹和html文件作为页面,我知道创建另一个html文件意味着创建另一个页面.但我不明白它如何与Vue CLI项目一起使用.

我在Vue文档中看到了诸如vue-router和"pages"之类的内容,但我对它们并不了解.我有什么选择？是否有一个指南详细解释,因为我找不到任何,更不用说详细了.如果你能提供帮助,我们将非常高兴!谢谢!