怎样配置才能让vuecli build后的静态文件放到子目录也能访问

Posted 2023-05-11

项目config文件夹里index.js中的assetsPublicPath，默认是/，改成你想设置的子目录名称，比如： /weixin/。
然后还要配置页面内的路由路径就可以了。

静态文件指像css,js,images之类的文件，在Django里面静态文件的处理与一般的视图是不一样，新手往往容易犯迷糊。

静态文件交由Web服务器处理，Django本身不处理静态文件。简单的处理逻辑如下(以nginx为例)：

URI请求-----> 按照Web服务器里面的配置规则先处理，以nginx为例，主要求配置在nginx.conf里的location

|---------->如果是静态文件，则由nginx直接处理

|---------->如果不是则交由Django处理，Django根据urls.py里面的规则进。

参考技术A 用vue-cli搭建的做法 1、npm run build 2、把dist里的文件打包上传至服务器 例 /data/www/，我一般把index.html放在static里 所以我的文件路径为： /data/www/static |-----index.html |-----js |-----css |-----images .... 3、配置nginx监听80... 参考技术B config文件夹中的index.js文件修改 assetsPublicPath: './', 参考技术C 不知道你说的 前后端没有完全分离 指的是哪部分，如果模版数据耦合就麻烦了，仅仅是页面耦合比较好办。 如果用的是尤雨溪大大默认的 webpack配置，build 下应该会生成 js 等文件，以及 index.html。我的建议是，index.html 交后端本回答被提问者采纳

怎样通过已经使用过webpack+vue+vueRouter+vuecli的配置文件package.json创建一个项目

首先，我们自己得手动创建一个webpack+vue+vueRouter+vuecli工程，执行下面：
如：
新建一个vue项目,创建一个基于"webpack"的项目,项目名为vuedemo：

$ vue init webpack vuedemo

安装完成后进入工程名称再根据原来项目的配置文件初始化

$ cd vuedemo
$ npm install

但是由于在新建的时候对eslint的选择中选择了Yes,所以后面根据配置package.json的时候，发现没有eslint-friendly-formatter 模块，由于原来的工程应该没有配置这个，所以这儿需要安装下，如下代码：

npm i -D eslint eslint-friendly-formatter

模块地址：https://www.npmjs.com/package/eslint-friendly-formatter

安装后执行:npm run dev 发现运行起来的页面没有启动起来，原因是还是这个eslint引起的。

出错信息为：

These relative modules were not found：
*/build/dev-client in multi ./build/dev-client ./src/main.js，
*./src/main.js in multi ./build/dev-client ./src/main.js

原因如下：
webpack.base.conf.js里面，脚手架本来就有 js的编译模块：

 {
        test: /\.js$/,
        loader: ‘babel-loader‘,
        include: [resolve(‘src‘), resolve(‘test‘)]
      }

我们需要注释掉这段代码：

//    {
//      test: /\.(js|vue)$/,
//      loader: ‘eslint-loader‘,
//      enforce: ‘pre‘,
//      include: [resolve(‘src‘), resolve(‘test‘)],
//      options: {
//        formatter: require(‘eslint-friendly-formatter‘)
//      }
//    },

原因就是导致重复编译，所以应该就有两个main.js文件。所以不要重复出现匹配规则就可以。
然后运行npm run dev可以了。
相似问题：vue-cli安装完成之后，命令行npm run dev没有问题，但webstorm报错