标签: vue-cli

我正在尝试使用Material-Components-vue和 vue-cli 使用 webpack 创建一个简单的 Web 应用程序，但是，我发现如果没有node_modules前面的~.

我尝试了几个 webpack/vue-cli 配置，最终得到了传递加载器选项的配置vue.config.js。

我的vue.config.js看起来像这样：

module.exports = {
    css: {
      loaderOptions: {
        sass: {
          includePaths: [
              './node_modules', //here I include node_modules
            ]
        },
      }
    }
  }

所以我希望能够导入这样的东西：

@import 'normalize/normalize'

（假设我有一个名为normalizemy 的目录node_modules，其中包含一个文件normalize.scss）

但是，webpack 会抛出错误，表示找不到该模块。
但是，这确实有效：

@import '~normalize/normalize'

如果所有 s 都是我写的，这不会有问题@import，但因为我使用的第三方模块@import里面有 s，所以 webpack 无法编译。

编辑1：

正如@Styx要求的那样

请分享更多配置

和

显示 vuespect --rule scss 的输出，以及带有此问题导入的整个文件

这里是： …

当使用Vue CLI v4.0.5创建一个新项目并检查TypeScript和Linter / Formatter的选项时，您将获得用于 linting 和格式化的预配置选项：

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)  

我想使用的Airbnb规则为ESLint用更漂亮（格式上保存），以打字稿解析器和Vue公司CLI V4。

这些配置也应该适用于 VS Code 的 Vetur 扩展。

如何配置这种工具组合？

请注意，这不是一个重复的问题。也有类似的问题，但没有针对 Vue CLI4、TypeScript、ESLint、Airbnb、Prettier 以及与 Vetur / VS Code 一起工作的这些确切要求。

编辑 2020/02 - 这个挑战的性质最近发生了很大变化，所以我打开并回答了另一个问题：如何在 VS Code 编辑器中使用 …

我有一个 Vue 应用程序正在使用 Vue CLI 构建用于生产部署。

我想在应用程序中包含一个典型的递增版本号，以便我和测试人员可以确定我们正在测试正确的确切版本。我想以至少两种方式在应用程序中使用它 a) 将它显示给测试人员，b) 将它包含在错误跟踪 API 调用中，例如 Sentry.io。

目前我必须查看 app.XXXX.js 上的哈希值并进行比较。虽然这确实唯一标识了构建，但它不是顺序的，对于 CSS/JS/供应商等是不同的，并且很难在代码库中使用。

我很高兴编写一个构建包装器脚本，该脚本管理数字并将其注入到构建中（如果需要的话）。

我目前使用的命令是例如

npx vue-cli-service build --mode staging

我想生产代码不精缩在dist/与@vue/cli 4.1.2

1?第一次尝试设置 vue.config.js

module.exports = {
  chainWebpack: config => {
  config.optimization.minimize(false)
  }
}

然后其他部分正常，但内联脚本仍然被缩小。

var Appvue_type_template_id_7a951895_render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{"id":"app"}},[_c('img',{attrs:{"alt":"Vue logo","src":__webpack_require__("cf05")}}),_c('HelloWorld',{attrs:{"msg":"Welcome to Your Vue.js App"}})],1)}

2？第二次尝试

使用开发模式 vue-cli-service build --mode development

但代码格式是 eval(...)

我使用默认的 vue-cli 命令创建了一个 vue 项目。

当 webpack 构建时，它失败了，如图所示：

我没有使用任何特殊的 webpack 配置。我究竟做错了什么？

我的 package.json：

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.4.4",
    "firebase": "^7.6.2",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-plugin-pwa": "^4.1.0",
    "@vue/cli-plugin-router": "^4.1.0",
    "@vue/cli-plugin-vuex": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 …

当我跑步时， npm start 我得到

ERROR  TypeError: Cannot read property 'version' of undefined
TypeError: Cannot read property 'version' of undefined

这发生在我跑完之后

npm install

我试图通过运行来解决这个问题， npm -g install npm@version但它给了我这个错误

npm ERR! code ETARGET
npm ERR! notarget No matching version found for npm@version.

vue 有这个选项publicPath，它允许一个应用程序部署在子路径上：foob​​ar.com/my-path，使链接和每个资产都可以通过它访问。

从性能的角度来看，我想在我的应用程序资产上启用 CDN。如何将 URL 专门用于资产（而不是超链接）？

例子： ./my-path/assets/app.js应该变成https://my-staging-cdn.com/my-path/assets/app.js
./my-path/url-2.html应该保持不变

下面的配置允许我设置路径和资产目录，但无法弄清楚如何为资产设置cdn URL

module.exports = {
  publicPath: ‘/my-path/‘,
  assetsDir: 'assets'
}

不能做： publicPath: process.env.NODE_ENV === 'production' ? 'https://my-staging-cdn.com/my-path' : '/my-path/'，因为它也会更改应用程序链接中的 URL。

我有一个 Vue-cli 项目，并希望启用离线支持（pwa，渐进式 Web 应用程序功能）。因此我为 vue cli 安装了 PWA-Plugin。

在 vue.config.js 中，我配置了 Pwa 和工作箱，如下所示：

...
pwa: {
    name: 'projectname',
    // configure the workbox plugin
    // workboxPluginMode: 'GenerateSW',
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'src/service-worker.js',
      }
}
...

现在我想将我的以下附加事件注入服务工作者（来自 src/service-worker.js）

self.addEventListener('push', function (event) {
    console.log('[Service Worker] Push Received.');
    console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
});

self.addEventListener('fetch', function (event) {
    console.log(event.request.url);
    // event.respondWith(() => {
    //     fetch(event.request)
    // }
    // );
});

在 registerServiceWorker.ts 中，我评论了环境检查，因此 …

我正在尝试使用 img 标签中的 src="" 从本地文件夹加载图像，但我想使用后端加载它们。前端已经有相对路径，即“../assets/imgs/”，后端只有名称和扩展名，例如）“1.png”。事情是它确实有效，但我收到了错误消息。

这给我带来了问题

<img width=100px height=100px :src="getIconPath(`${user.icon}`)"/>

这是被调用的函数

  methods: {
    getIconPath(iconName) {
      return iconName ? require("../assets/imgs/" + iconName) : ''
    }

这是我在控制台上收到的两个错误消息

[Vue warn]: Error in render: "Error: Cannot find module './undefined'"
found in
---> <Profile> at src/components/profile.vue
       <Navbar> at src/components/navbar.vue
         <Main> at src/main.vue
           <Root> vue.runtime.esm.js:619
Error: "Cannot find module './undefined'"
    webpackContextResolve .*$:13
    webpackContext .*$:8
    getIconPath profile.vue:74
    render profile.vue:12
    VueJS 43
    <anonymous> main.js:31
    js app.js:1415
    __webpack_require__ app.js:785
    fn app.js:151
    1 app.js:1488
    __webpack_require__ app.js:785
    checkDeferredModules app.js:46
    <anonymous> app.js:861 …

我有一个多页 Vue.js 应用程序，其中包含有关域/法律的工作页面；域/提交；等等。我在 Vue.js页面的帮助下实现了它（即定制vue.config.js）

换句话说，我很好地完成了上述工作。

我现在正在尝试在新的子目录级别下实现更多的嵌套页面（除了上面我已经拥有的页面）。IE

• 域/组织/配置文件 1
• 域/组织/配置文件 2
• 域/组织/配置文件 3

有什么办法可以通过自定义来完成这项工作vue.config.js？

当前尝试vue.config.js代码：

module.exports = {
  pages: {
    index: {
      entry: "./src/pages/home/main.js",
      template: "public/index.html",
      title: "Home",
      chunks: ["chunk-vendors", "chunk-common", "index"],
    },
    legal: {
      entry: "./src/pages/legal/main.js",
      template: "public/index.html",
      title: "Legal",
      chunks: ["chunk-vendors", "chunk-common", "legal"],
    },
    submit: {
      entry: "./src/pages/submit/main.js",
      template: "public/index.html",
      title: "Submit",
      chunks: ["chunk-vendors", "chunk-common", "submit"],
    },
    org: {
      digitalocean: {
        entry: "./src/pages/org/digitalocean/main.js",
        template: "public/index.html",
        title: "Digital Ocean",
        chunks: ["chunk-vendors", "chunk-common", …