标签: vue-cli

我正在开发一个基于 vue-cli webpack 模板的单页应用程序。由于我们也必须使用静态资产，因此我们需要在样式表中引用它们。

官方文档推荐使用如下绝对路径：

background-image: url('/assets/images/lo/example2.svg');

问题是，静态资源不会由 vue-loader 和 webpack 本身处理，因此在最终输出样式表中不会正确设置 url。webpack url-loader 将处理的所有资产将根据您的 publicPath 配置获得正确的相对 url。静态资产也需要同样的效果。

您知道如何将静态资产与基于 vue.js 的应用程序结合使用吗？

更新

经过研究和大量的反复试验，我决定将最终的样式表和脚本包放在 index.html 旁边的根文件夹中。生成的路径将正常工作。不是最佳解决方案，因为我更喜欢脚本和样式表的子文件夹（尽管它们只包含一个文件）。但尽管如此，我还是有一个生成一致且有效的工件的构建过程。

我需要配置 Webpack 以url-loader通过 Vue Cli（最新）接受和处理 PDF 文件。

vue.config.js

module.exports = {
  configureWebpack: {
    rules: [
      {
        test: /\.(pdf)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'files/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

以上看起来正确还是我遗漏了什么？这方面的文档在这里：https : //github.com/vuejs/vue-cli/blob/dev/docs/webpack.md#basic-configuration

我收到错误：

WebpackOptionsValidationError：无效的配置对象。Webpack 已使用与 API 架构不匹配的配置对象进行初始化。配置有一个未知的属性“规则”。

我在这里显然缺少一些关于如何在 Vue 中增强生成的 Webpack 配置的理解。

帮助表示赞赏！谢谢

我在使用 vue-cli v3.0 部署 Vue 应用程序构建时遇到了一些麻烦。到 GitHub 页面。我使用子树dist将文件夹仅发送到gh-pages分支。首先，问题是找不到资产，但我使用baseUrlon修复了它vue.config.js。现在的问题是该#app元素为空。我发现如果我不使用vue-router（直接渲染视图而不是使用<router-view/>），该应用程序可以在 GitHub 页面上正常工作。我相信路线选项存在一些问题path，但我无法弄清楚如何解决它。

有问题的存储库是https://github.com/guizoxxv/vue-cli-deploy，GitHub 页面链接是https://guizoxxv.github.io/vue-cli-deploy/

谢谢。

我尝试了最新的 vue-cli 3 工具...完全安装项目设置正确完成，但是一旦我添加了一个新的依赖项，我就会得到一个警告列表，未满足的依赖项...是不是由于纱线（我做了不测试 npm ..) 或不。无论如何要解决它们？

    $ yarn add vue-i18n
    yarn add v1.9.4
    [1/4]   Resolving packages...
    [2/4]   Fetching packages...
    [3/4]   Linking dependencies...
    warning "@vue/cli-plugin-babel > babel-loader@8.0.0-beta.4" has unmet peer dependency "webpack@>=2".
    warning "@vue/cli-plugin-eslint > eslint-loader@2.1.0" has unmet peer dependency "webpack@>=2.0.0 <5.0.0".
    warning "@vue/cli-plugin-pwa > workbox-webpack-plugin@3.4.1" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
    warning "@vue/eslint-config-prettier > eslint-config-prettier@2.10.0" has unmet peer dependency "eslint@>=3.14.1".
    warning " > babel-core@7.0.0-bridge.0" has unmet peer dependency "@babel/core@^7.0.0-0".
    warning " > sass-loader@7.1.0" has unmet peer …

我的应用程序分为一个API和一个UI部分。部署策略要求他们共享一个package.json。文件结构看起来像

client/
       src/
           main.js
api/
package.json
vue.config.js

我正在使用标准的vue-cli脚本。

package.json

"scripts": {
  "serve:ui": "vue-cli-service serve",
  "build:ui": "vue-cli-service build",
  "lint:ui": "vue-cli-service lint",
  "test:unit": "vue-cli-service test:unit"
}

当我这样做npm run serve:ui，我得到

This relative module was not found:

* ./src/main.js in multi ./node_modules/@vue/cli-service/node_modules/webpack-dev-server/client?http://10.0.2.15:8080/sockjs-node ./node_modules/@vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js

因此，我尝试按照docs修改vue.config.json：

vue.config.js

const path = require('path');
module.exports = {
    entry: {
        app: './client/src/main.js'
    }
}

现在，我得到了错误：

 ERROR  Invalid options in vue.config.js: "entry" is not allowed

如何告诉vue-cli我的应用程序入口点在哪里？

我正在用 Vue 构建一个应用程序。我需要https在本地环境中进行开发和测试。我按照本教程成功创建了必要的证书。为了让开发服务器使用它们，我将server.key和server.crt文件复制到我的项目的根目录中，并将文件保留rootCA.pem在~/.ssh. 我在/etc/hosts别名 localhost 中为我的域添加了一个条目，例如：

127.0.0.1 example.test

然后我vue.config.js在我的项目的根目录中编辑，看起来像：

127.0.0.1 example.test

这在本地效果很好。我的问题出在我的临时服务器上。

我的登台服务器正在运行 ubuntu (16.04) 并使用certbot(LetsEncrypt)安装了实际的 SSL 证书（即非自签名）。我的项目是一个静态前端，因此我将其nginx配置为指向/dist目录并使项目在staging.example.com. 在我devServer在vue.config.js上面添加配置之前，这一切正常。

我期望发生的事情：

当我构建用于登台的项目时，即

npm run build -- --mode staging

我希望它忽略devServer配置部分，因为NODE_ENV === 'production'（在我的.env.staging文件中设置）。

什么实际发生的情况：

构建过程失败，抱怨：

Error loading vue.config.js:
Error: ENOENT: no such file …

创建新的 Vue 项目时，我使用 Vue CLI（终端）。我运行vue create projectName并生成了一个本地存储库（带有 git 文件）。

当我有现有项目时，例如在 Github 上，此存储库将具有以下路径

https://github.com/user/projectname.git

现在，我克隆了这个空存储库，使用 Vue CLI 生成一个新存储库，并将所有文件从本地存储库移动到 Github 存储库。之后我可以删除本地的。

有没有办法生成新项目并将所需文件直接推送到现有存储库？

我最近从 Vuetify 1.5 升级到 Vuetify 2.0，但无法正常工作。我觉得我错过了一些东西。

我下载了最新的 Vuetify 包和 @mdi/font 包。据我所知，我已经按照文档中的说明操作：我已经添加了带有 vuetify.js 文件的 plugins 文件夹，据我所知，我已经将 Vuetify 实例化到我的 Main.js 文件中正确，但没有任何样式出现在我的应用程序中。我还尝试在我的项目的各个位置（我的 App.vue 文件和各种其他页面文件）中添加元素标记，但似乎所做的只是破坏了更多内容；我要么让一个元素出现在没有样式的 DOM 上，要么 DOM 出现完全白色。

这是我的 vuetify.js 文件：

import Vue from "vue";
import Vuetify from "vuetify";
import "@mdi/font/css/materialdesignicons.css";

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: "mdi"
  }
});

这是我的 main.js 文件：

import Vue from "vue";
import App from "./App.vue";
import router from "./Router";
import Vuetify from "@/plugins/vuetify";
import 'vuetify/dist/vuetify.min.css'

Vue.config.productionTip = false;

new Vue({
  router,
  Vuetify,
  render: h => …

我正在尝试将图像添加到BoostrapVue 中 b-carousel 的img-src=""属性。该图像当前保存在 asset 文件夹中。

  <b-carousel-slide img-src="../assets/life.jpg">
        <h1>Hello world!</h1>
      </b-carousel-slide>

我添加了查找结果的下面图像：

我确信图像已正确保存在正确的位置：

以下是我的应用程序src目录的内容。如何使用命令将位于文件夹中的文件复制src/assets/others到dist/others文件夹中vue-cli-service build？顺便提一句。我的项目是用vue create命令创建的。

    src/
    ??? App.vue
    ??? assets
    |    ??? others
    |        ??? metadata.xlsx
    dist/
    ??? css
    ?   ??? app.4d032e62.css
    ?   ??? chunk-vendors.f6f30965.css
    ??? favicon.ico
    ??? img
    ?   ??? upload.a0fd70ac.svg
    ??? index.html
    ??? js
        ??? app.11cd5b00.js
        ??? app.11cd5b00.js.map
        ??? chunk-vendors.58c6929b.js
        ??? chunk-vendors.58c6929b.js.map