CODEWITHSUNDEEP
webpackvue.jsvuejs2
Henry Yong
Henry Yong

Reputation: 97

Cannot load any css and js file after build when using vue-cli and webpack?

I am using koa2 as backend and koa-swig to render my page. Here is the structure: enter image description here

Inside dist file, there are index.html and static. All css, js, and images are in there. And here is the error: image

Here is the build setting in config/index.js of webpack:

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
   }

Upvotes: 2

Views: 2785

Answers (2)

gy134340
gy134340

Reputation: 596

Just change the config assetsPublicPath: '/' to assetsPublicPath: '../dist', it works for me.

Upvotes: 1

Mani Jagadeesan
Mani Jagadeesan

Reputation: 24265

After you build the Vue.js app, your output files will be available in dist/ folder.

From this point onwards, your webpack build config does not matter. What matters is how your server handles the requests.

The contents of dist folder will have the following:

  1. index.html file
  2. static folder

I assume you would copy the above files to your server for end-to-end testing.

Your index.html links to files in your static folder using plain <script> or <link> tags. After your browser fetches the index.html, it will start requesting all the other files like app.xyz.js, vendor.xyz.js, etc. You either need to ensure that these static files are accessible in their default paths, or change path as explained in the below example:

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

may need to be changed to

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

You need to look at server logs to see why the requests are not getting served. Once you fix the server side errors, then your Vue app will work normally in production mode.

Upvotes: 2

Related Questions