Webpack 和 vue-loader 使用依赖项答案

【问题标题】：Webpack and vue-loader to work with a dependencyWebpack 和 vue-loader 使用依赖项
【发布时间】：2020-09-13 22:51:52
【问题描述】：

我有一个私有构建的依赖项，它在我的项目中编译为 commonjs。

在依赖本身中，它引用了我项目中的一个文件，一个 vue 文件。在使用 webpack 构建并使用 ssr 之后，它似乎有一个问题。加载vue文件失败。

为清楚起见，文件夹结构：

node_modules
    |
    |- dependency
           |
           |-main.js
src
 |
 |-pages
     |
     |-Default.vue
dist
 |
 |-compiledcode.js <- what webpack compiles

现在在依赖的 main.js 中，我有 const vuefile = require('../../src/pages/Default.vue')

Node 通过 ssr 托管时显示的错误：

<template>
^

SyntaxError: Unexpected token '<'

在我的 webpack 中，我有以下内容：

module.exports = {
  ...
  module: {    
       rules: [
          {
           test: /\.vue$/,
           loader: 'vue-loader',        
          },
          ...
       ]
   },
   plugins: [
      new VueLoaderPlugin()
      ...
   ]
}

根据我的理解，错误是 vue-loader 没有加载到文件中。但我什至不知道这是否可能开始。如果可以对此进行澄清。

如果不可能的话..

是否可以将 webconfig 添加到依赖项并使其以这种方式工作？如果是这样，我如何让我的 webpack 与依赖 webpack 交互。

谢谢。

【问题讨论】：

标签： node.js vue.js webpack server-side-rendering vue-loader

【解决方案1】：

你能展示你的整个配置吗？

设置webpack resolve（包括扩展解析）
vue 是否包含在 main.js 中？（导入 vue..）
设置alias 以防止类似'../../src/pages/..' 的路径

【讨论】：