Скажите Webpack, где найти статические активы в приложении Vue

Question

Я недавно перешел на Vue 3 CLI.После создания проекта Vue я установил веб-пакет, а затем добавил следующий файл в базовый каталог своего проекта:

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, запустите сборку, все hrefs в моем файле index.html ссылаются на корневой каталог (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 и перейти к нему из браузера:

1. Открыть терминал и CD в <project_root>/dist.
2. Run python -m SimpleHTTPServer, который должен распечатать что-то вроде Serving on 0.0.0.0 port 8000.Запишите номер порта для следующего шага.(Либо запустите http-server)
3. Откройте браузер и перейдите к http://localhost:8000.