告诉 Webpack 在 Vue 应用程序中哪里可以找到静态资源答案

【问题标题】：Tell Webpack Where to Find Static Assets in Vue Application告诉 Webpack 在 Vue 应用程序中哪里可以找到静态资源
【发布时间】：2019-06-11 10:42:04
【问题描述】：

我最近切换到了 Vue 3 CLI。使用创建 Vue 项目后，我安装了 webpack，然后将以下文件添加到我的项目的基本目录：

vue.config.js

const webpack = require('webpack')

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.optimize.LimitChunkCountPlugin({
                maxChunks: 1
            })
        ]
    },
    chainWebpack:
    config => {
        config.optimization.delete('splitChunks')
    }
}

我的目标是使用这个很棒的模块制作自定义元素：https://github.com/karol-f/vue-custom-element。它似乎按预期工作，但是当我运行 npm run build 时，我的 index.html 文件中的所有 href 链接到根目录 (href=/css/app.11f77a6e.css)，所以浏览器看起来像这样的地方：

`file:///C:/css/app.11f77a6e.css`

如何配置 Webpack 以使资源链接是相对的并在 dist 文件夹中查找？

我尝试使用以下内容将 webpack.config.js 文件添加到我的项目的根目录：

const path = require('path');

module.exports = {
    output: {
        path: path.resolve(__dirname, 'dist')
    }
}

但这并没有帮助。

这是我的 package.json

{
  "name": "build-flow",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "vue": "^2.5.21",
    "vue-custom-element": "^3.2.6",
    "webpack": "^4.28.4"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "vue-template-compiler": "^2.5.21"
  }
}

【问题讨论】：

@tony19 太棒了，谢谢。
当然，没问题:)

标签： javascript vue.js webpack

【解决方案1】：

看到file:/// URL 意味着您没有通过开发服务器查看文件。您可能会直接打开index.html（例如，通过双击index.html）。如果是这种情况，您需要在dist 中启动一个服务器，并从您的浏览器导航到它：

打开终端，然后 CD 进入 <project_root>/dist。
运行python -m SimpleHTTPServer，应该会打印出类似Serving on 0.0.0.0 port 8000 的内容。记下下一步的端口号。（或者，运行http-server）
打开浏览器，导航到http://localhost:8000。

【讨论】：