Question

我使用vue-cli和webpack模板创建了一个Vuejs2应用。使用npm run dev时，一切正常。我准备好发布到生产中，所以我继续使用npm run build构建应用程序，输出：

⠋ building for production...
Starting to optimize CSS...
Processing static/css/app.c8922694f1a64e6d88212a475e9acb3d.css...
Processed static/css/app.c8922694f1a64e6d88212a475e9acb3d.css, before: 13939, after: 13014, ratio: 93.36%
Hash: 81c876041faf79bde1db
Version: webpack 2.4.1
Time: 15715ms
                                                  Asset       Size  Chunks                    Chunk Names
               static/js/vendor.d14a81341e99db221385.js     595 kB       0  [emitted]  [big]  vendor
                           static/img/world.b9bd0db.png     407 kB          [emitted]  [big]  
              static/fonts/Montserrat-Light.9e52b00.ttf     192 kB          [emitted]         
           static/fonts/VarelaRound-Regular.eefe486.ttf     135 kB          [emitted]         
                      static/fonts/LANENAR_.97d2f1c.ttf    20.3 kB          [emitted]         
                  static/js/app.7e05b814ec0b7b7e4286.js    17.8 kB       1  [emitted]         app
             static/js/manifest.432e34173b16e9643e3a.js     1.5 kB       2  [emitted]         manifest
    static/css/app.c8922694f1a64e6d88212a475e9acb3d.css      13 kB       1  [emitted]         app
           static/js/vendor.d14a81341e99db221385.js.map    2.98 MB       0  [emitted]         vendor
              static/js/app.7e05b814ec0b7b7e4286.js.map     113 kB       1  [emitted]         app
static/css/app.c8922694f1a64e6d88212a475e9acb3d.css.map    26.3 kB       1  [emitted]         app
         static/js/manifest.432e34173b16e9643e3a.js.map    14.4 kB       2  [emitted]         manifest
                                             index.html  446 bytes          [emitted]         

  Build complete.

和dist目录

如果我转到dist目录并运行↳ python -m SimpleHTTPServer 8000，那么一切都按预期工作。

我现在将dist目录移动到我的服务器文档根目录，以及所有内容崩溃的地方。该应用程序无法再找到已编译的文件：

localhost/:1 GET http://localhost:8000/static/css/app.c8922694f1a64e6d88212a475e9acb3d.css 
localhost/:1 GET http://localhost:8000/static/js/manifest.432e34173b16e9643e3a.js 
localhost/:1 GET http://localhost:8000/static/js/app.7e05b814ec0b7b7e4286.js 
localhost/:1 GET http://localhost:8000/static/js/vendor.d14a81341e99db221385.js 
localhost/:1 GET http://localhost:8000/static/js/app.7e05b814ec0b7b7e4286.js

显然，它在错误的地方寻找并且应该寻找

http://localhost:8000/dist/static/css/app.c8922694f1a64e6d88212a475e9acb3d.css

以下是index.html：

<script type=text/javascript src=/static/js/manifest.432e34173b16e9643e3a.js></script>
<script type=text/javascript src=/static/js/vendor.d14a81341e99db221385.js></script>
<script type=text/javascript src=/static/js/app.7e05b814ec0b7b7e4286.js></script>

如何修改webpack配置以在服务器文档根目录下加载应用程序？

Answer 1

在config/index.js部分下修改build：

 assetsPublicPath: '/dist/'

做了这个伎俩。

将dist更改为您要使用的名称

移动使用webpack构建的vuejs应用程序

1 个答案: