CODEWITHSUNDEEP
webpackvuejs2
neric
neric

Reputation: 4221

Moving a vuejs app built with webpack

I created a Vuejs2 app using the vue-cli and the webpack template. All is working fine whilst using npm run dev. I am ready for releasing into production so I proceed to build the app using npm run build which outputs:

⠋ 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.

and a dist directory

If I go to the dist directory and run ↳ python -m SimpleHTTPServer 8000 then everything work as expected.

I now move the dist directory to my server document root and that's where everything falls apart. The app cannot find the compiled files anymore:

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

Obviously it's looking in the wrong place and should be looking for

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

Here is the 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>

How can I modify webpack config to make the app load under a server document root?

Upvotes: 0

Views: 300

Answers (1)

neric
neric

Reputation: 4221

Modifying config/index.js like so under the build section:

 assetsPublicPath: '/dist/'

did the trick.

Change dist to whathever name you want to use

Upvotes: 1

Related Questions