使用vue-cli和webpack构建后无法加载任何css和js文件？

Question

我使用koa2作为后端和koa-swig来呈现我的页面。这里是结构：

里面的dist文件中，有index.html和static。所有的CSS，JS和图像都在那里。这里是错误：

这里是构建的WebPack的config/index.js设置：

build: { 
    env: require('./prod.env'), 
    index: path.resolve(__dirname, '../dist/index.html'), 
    assetsRoot: path.resolve(__dirname, '../dist'), 
    assetsSubDirectory: 'static', 
    assetsPublicPath: '/', 
    productionSourceMap: true, 
    productionGzip: false, 
    productionGzipExtensions: ['js', 'css'], 
    bundleAnalyzerReport: process.env.npm_config_report 
    } 

Answer 1

您打造Vue.js应用程式后，输出文件将在dist/文件夹中可用。

从现在开始，你的webpack build配置并不重要。重要的是你的服务器如何处理请求。

dist文件夹的内容将有以下：

1. index.html文件
2. static文件夹

我想你会的上述文件复制到你的服务器端至端测试。

您的index.html链接到您的静态文件夹中的文件使用普通<script>或<link>标签。在您的浏览器获取index.html后，它将开始请求所有其他文件，如app.xyz.js,vendor.xyz.js等。您需要确保这些静态文件可以在其默认路径中访问，或者按照以下示例中的说明更改路径：

<script type="text/javascript" src="/static/js/app.xyz.js"></script> 

可能需要改变

<script type="text/javascript" src="/static_files/scripts/app.xyz.js"></script> 

你需要看看服务器日志，看看为什么请求没有得到服务。一旦你修复了服务器端的错误，那么你的Vue应用程序将在生产模式下正常工作。

Answer 2

只需将配置assetsPublicPath: '/'更改为assetsPublicPath: '../dist'，它适用于我。