如何在apache上部署vuejs / flask项目

Question

I've created a simple project with vuejs as the frontend and flask as backend.

The project was constructed by following the example here , thus the resultant file structure is like that the vuejs build files "dist" is on the same folder as that of the driving python script, run.py.

The project was tested and working fine locally now I ran into problems trying to deploy it on my Ubuntu server hosted by digitalocean.

I followed this article to learn how to deploy - the article was well written but I believed I need to change the apache config file (/etc/apache2/sites-available/000-default.conf) a little to specify the static files of my project as shown in the screenshot.

The question is how? I don't know. When I followed the article word by word and launched the web app, it showed errors like:

Loading failed for the <script> with source “http://my_website.com/static/js/manifest.0e78d562f6b86d93f516.js”. vue-amazon:1:1

static is a standard vuejs folder under "dist" in my file structure.

Answer 1

I found the issue has nothing to do with the way how Flask project is deployed - it's about the configuration of the vuejs frontend.

I need to adjust the setting of assetsPublicPath in vuejs's config file, to a proper location where the index.html can find the obfuscated javascripts.

For example, if my project is called "ABC", and i want the url looks like:

http://my-site.com/ABC

I need to have this in the vuejs config file:

env: require('./prod.env'),
index: path.resolve(__dirname, '../../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '../../ABC/dist/',

before I run

npm run build