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

Question

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

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

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
   }

Mani Jagadeesan · Accepted Answer · 2017-02-17 15:29:07Z

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:

index.html file
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.

gy134340 · Accepted Answer · 2017-03-13 15:53:17Z

1

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

answered Mar 13, 2017 at 15:53

gy134340

6067 silver badges20 bronze badges

1 Comment

sunwarr10r Over a year ago

the option is now called publicPath: ''

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related