Question

我最近切换到了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"
  }
}

Answer 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。

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

1 个答案: