vue-cli 3版本没有static文件夹,本地文件应放在哪儿,如何引用

45 篇文章 1 订阅
7 篇文章 0 订阅

2.x版本目录:

3.0版本:

 

原来放在static下的文件,现在应该放在public文件夹下

2.x 写法:

methods: {
  fetchData () {
    let _this = this
    this.$http.get('/static/data/article.json').then(res => {
      _this.htmlText = res.data
    }).catch(err => {
      console.log('22222:', err)
    })
  }
}

3.0写法:

fetchData () {
    // this.htmlText = article[this.$route.query.id].content
  let _this = this;
    this.$http.get('/data/article.json').then(res => {
    _this.htmlText = res.data
  }).catch(err => {
    console.log('222222:', err)
  })
}

 如果json文件里有图片路径里不用加 public 

<img src=\"../../public/img/details06_3.png\" alt=\"\">

改为:

<img src=\"../../img/details06_3.png\" alt=\"\">

 

cli3.0 项目结构 及相应作用

 

  • 14
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
要将vue-cli2项目添加ssr打包,需要进行以下步骤: 1. 首先,安装相的依赖包。在项目根目录下运行以下命令: ``` npm install vue-server-renderer --save npm install webpack-node-externals --save-dev ``` 这样可以安装vue-server-renderer和webpack-node-externals两个依赖包。 2. 创建一个新文件,用于处理服务器端渲染。在项目根目录下创建一个`build`文件夹,并在其中创建一个名为`webpack.server.config.js`的文件。在该文件中,添加以下内容: ```javascript const path = require('path') const webpack = require('webpack') const nodeExternals = require('webpack-node-externals') module.exports = { target: 'node', entry: './src/server.js', // 根据实际文件名修改 output: { filename: 'server.bundle.js', path: path.join(__dirname, '../dist'), libraryTarget: 'commonjs2' }, externals: [nodeExternals()], module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] } } ``` 3. 修改package.json文件,添加相的脚本。在`scripts`字段中添加以下内容: ```json "scripts": { "build:server": "webpack --config build/webpack.server.config.js", "build": "npm run build:server && npm run build:client", "build:client": "vue-cli-service build" } ``` 这样可以添加三个命令:`build:server`用于构建服务器端渲染文件,`build:client`用于构建客户端文件,`build`用于同时构建服务器端和客户端文件。 4. 创建一个服务器端入口文件。在`src`文件夹下创建一个名为`server.js`的文件,并在其中添加以下内容: ```javascript const fs = require('fs') const path = require('path') const express = require('express') const { createBundleRenderer } = require('vue-server-renderer') const server = express() const template = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8') const serverBundle = require('./dist/server.bundle') const renderer = createBundleRenderer(serverBundle, { template, runInNewContext: false }) server.use(express.static(path.resolve(__dirname, '../dist'))) server.get('*', (req, res) => { const context = { url: req.url } renderer.renderToString(context, (err, html) => { if (err) { console.error(err) res.status(500).end('Server error') return } res.end(html) }) }) server.listen(3000, () => { console.log('Server started at http://localhost:3000') }) ``` 在这个文件中,首先引入所需的模块。然后,使用`createBundleRenderer`方法创建bundle渲染器,并传入相关参数。接着,设置静态文件目录,并处理所有请求,将渲染好的HTML返回给客户端。 5. 最后,运行`npm run build`命令进行打包。打包完成后,可以运行`node dist/server.bundle.js`启动服务器端。 至此,我们成功将vue-cli2项目添加了ssr打包。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值